要在应用程序中使用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容器，因此只占用了包装其元素所需的空间。