关注我们

Flexbox - flex 容器

要在应用程序中使用Flexbox，您需要使用 display 属性创建(create)/定义(define) Flex集合。

用法-

display: flex | inline-flex

该属性接受两个值

flex - 生成块级flex集合。
inline-flex - 生成一个内联flex集合。

现在，无涯教程将结合示例使用 display 属性。

无涯教程网

Flex集合

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

复制代码

<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class="container">
         <div class="box box1">One</div>
         <div class="box box2">two</div>
         <div class="box box3">three</div>
         <div class="box box4">four</div>
         <div class="box box5">five</div>
         <div class="box box6">six</div>
      </div>
   </body>
</html>

它将产生以下输出-

由于给 display 属性赋予了 flex 值，因此集合使用集合(浏览器)的宽度。

内联Flex集合

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

复制代码

<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class="container">
         <div class="box box1">One</div>
         <div class="box box2">two</div>
         <div class="box box3">three</div>
         <div class="box box4">four</div>
         <div class="box box5">five</div>
         <div class="box box6">six</div>
      </div>
   </body>
</html>