当前位置：首页 > news >正文

掌握CSS弹性盒子：打造灵活且响应式的布局

news 来源：原创 2025/5/26 3:24:20

弹性盒子（Flexbox）是CSS3中引入的一种布局模型，旨在提供一种更有效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小未知或动态变化。弹性盒子布局模型使得设计响应式布局变得更加简单和直观。

一、弹性盒子的核心概念

二、flex布局

2.1 序言

2.2 主轴和交叉轴

2.3 弹性布局

2.4 平均分布

编辑

三、弹性盒子的优势

总结

一、弹性盒子的核心概念

容器（Flex Container）：应用display: flex;的元素，其直接子元素成为弹性项目。
项目（Flex Items）：容器内的子元素，它们的布局行为由弹性盒子模型控制。
主轴（Main Axis）：弹性项目的排列方向，由flex-direction定义。
交叉轴（Cross Axis）：与主轴垂直的方向，用于对齐项目。

二、flex布局

2.1 序言

flex是一种一维的布局模型，它给flex的子元素之间提供了强大的空间分布和对齐能力。一次只能处理一个维度上的元素布局，一行或者一列。

2.2 主轴和交叉轴

每个flex容器都有主轴和交叉轴。主轴由 flex-direction 定义（默认如图），另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。

2.3 弹性布局

设置 display:flex; 将一个标签设置为flex容器，其直系子元素就成为flex元素，并且执行flex容器的默认设置：元素从主轴的起始线开始排列为一行、元素被拉伸来填充交叉轴大小、 flex-wrap 为nowrap。

属性：

① flex-direction

更改flex容器中元素的排列方式或主轴。

row（默认值）：从左到右
row-reverse：从右到左
column：从上到下，主轴和交叉轴交换
column-reverse：从下到上，主轴和交叉轴交换。

②justify-content

元素再主轴方向上对齐方式

flex-start（默认值）：元素靠齐主轴的起始点。
flex-end：元素靠齐主轴的终止点。
center：元素再主轴的中心。
space-between：相邻元素的间距相同，首位元素在起始点、终止点靠齐。
space-around：每个元素自身的左右留白相等。
space-evenly：所有元素的左右空间都相同。

③align-items

元素在交叉轴方向对齐方式和空间分配

stretch（默认值）：拉伸元素高度来填满flex容器。
flex-start：元素靠齐交叉轴的起始点。
flex-end：元素靠齐交叉轴的终止点。
center ：元素在交叉轴的中心。

④flex-wrap

虽然 flexbox 是一维模型，但可以通过该属性使flex元素溢出时换行。

no-wrap（默认值）：无论有多少元素，都不换行，元素会被挤小。
wrap ：容器放不下元素时，换行。

注意：指定为 wrap 时，应该把每一行看作一个新的 flex 容器，并且每行拥有自己的主轴和交叉轴。

⑤align-content

当flex容器为wrap并且出现换行时，指定多根主轴（每行）在flex容器中交叉轴方向上的对齐方式。

flex-start（默认值）：每根主轴靠齐容器交叉轴方向的起始点。
flex-end：每根主轴靠齐容器交叉轴方向的终止点。
center：每根主轴在容器交叉轴方向的中心。
space-between：相邻元素的间距相同，首位元素在起始点、终止点靠齐。
space-around：每个主轴自身在容器交叉轴方向留白相等。
space-evenly：所有元素的左右空间都相同。

2.4 平均分布

如果元素在flex容器中，可以设定其 flex 值，最终容器中的元素所占大小即元素之间的 flex值比例。若只有容器中一个元素，则占满；若只有容器中只有一个元素设定了flex，则该元素占满剩余空间。

<style>
.dataDiv{
      width: 1000px;
      height: 200px;
      background-color: antiquewhite;
      display: flex;
    }
    .child1{
      flex: 2;
      background-color: orange;
    }

    .child2{
      flex: 1;
      background-color: chocolate;
    }
  </style>

<body>
  <div class="dataDiv">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>

结果为：