Flexbox - flex 容器

Flexbox - flex 容器 首页 / CSS入门教程 / Flexbox - flex 容器

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

用法-

display: flex | inline-flex

该属性接受两个值

  • flex             - 生成块级flex集合。

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

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

Flex集合

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

链接:https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flex-containers.html

来源:LearnFk无涯教程网

<!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>

它将产生以下输出-

由于无涯教程使用了内联flex集合,因此只占用了包装其元素所需的空间。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

技术与商业案例解读 -〔徐飞〕

深入浅出gRPC -〔李林锋〕

Java核心技术面试精讲 -〔杨晓峰〕

Web协议详解与抓包实战 -〔陶辉〕

高并发系统设计40问 -〔唐扬〕

Netty源码剖析与实战 -〔傅健〕

零基础实战机器学习 -〔黄佳〕

商业思维案例笔记 -〔曹雄峰〕

手把手教你落地DDD -〔钟敬〕

好记忆不如烂笔头。留下您的足迹吧 :)