📜  Flexbox-Flex容器

📅  最后修改于: 2020-10-25 02:30:13             🧑  作者: Mango


要在应用程序中使用Flexbox,您需要使用display属性创建/定义Flex容器。

用法

display: flex | inline-flex

该属性接受两个值

  • flex-生成一个块级的flex容器。

  • inline-flex-生成一个内联flex容器框。

现在,我们将通过示例了解如何使用display属性。

柔性

将此值传递给display属性后,将创建一个块级弹性容器。它占据了父容器(浏览器)的整个宽度。

以下示例演示如何创建块级Flex容器。在这里,我们正在创建六个具有不同颜色的盒子,并使用了flex容器来固定它们。


   
   
      
One
two
three
four
five
six

它将产生以下结果-

由于我们给display属性赋予了flex值,因此容器使用容器(浏览器)的宽度。

您可以通过在容器上添加边框来观察此情况,如下所示。

.container {
   display:inline-flex;
   border:3px solid black;
}

它将产生以下结果-

内联柔性

将此值传递给display属性后,将创建一个内联级别的弹性容器。它只是取代了内容所需的位置。

以下示例演示如何创建内联Flex容器。在这里,我们正在创建六个具有不同颜色的盒子,并使用了inline-flex容器来固定它们。


   
   
      
One
two
three
four
five
six

它将产生以下结果-

由于我们使用了内联flex容器,因此只占用了包装其元素所需的空间。