CSS display box flex介绍

在本文中，我们将详细介绍CSS的display属性中的一个很有用的值——flex。

阅读更多：CSS 教程

什么是Flexbox？

Flexbox是CSS3中的一种布局模式，也称为flexible box model。使用Flexbox可以更方便地对盒状模型进行布局，并且适用于不同设备和不同的屏幕大小。

如何使用Flexbox？

要使用Flexbox，请将父元素的”display”属性设置为”flex”或者”inline-flex”。 以下面的HTML代码为例：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

我们可以用下面的CSS代码来定义容器（父元素）和盒子（子元素）之间的Flexbox布局：

.container {
  display: flex;
}
.box {
  flex: 1;
}

以上代码中，.container 属性设置了”display: flex”，这表示该容器使用了Flexbox布局。.box 属性使用了”flex: 1″，表示各盒子子元素随容器自适应，每个盒子的宽度将自动调整为相同的大小。

Flexbox的属性

Flexbox布局还涉及了多个重要的属性，这些属性可以控制Flexbox布局中的盒子元素。

主轴和交叉轴

Flexbox布局有一个”主轴”和一个”交叉轴”。 主轴是Flexbox方向，可以是水平方向或垂直方向。默认方向是水平方向（从左到右）。 交叉轴是垂直于主轴的方向。

flex-direction

此属性定义了Flexbox子元素在容器中排列的方向。

• row（默认值）: 从左到右以行的方式排列。
• column: 从上到下以列的方式排列。
• row-reverse: 从右到左以行的方式排列。
• column-reverse: 从下到上以列的方式排列。

示例代码：

.container {
  display: flex;
  flex-direction: column;
}

justify-content

此属性定义了Flexbox子元素在主轴上的对齐方式。

• flex-start（默认值）：在主轴上顶格排列；
• flex-end：在主轴上对齐末端；
• center：在主轴上居中对齐；
• space-between：在主轴上留出两端边距，仅保留间隔；
• space-around：在主轴上留出两端边距，将间隔均匀分布；

示例代码：

.container {
  display: flex;
  justify-content: space-around;
}

align-items

此属性定义了Flexbox子元素在交叉轴上的对齐方式。

• stretch（默认值）：拉伸到与盒子同样高度或宽度；
• flex-start：与交叉轴的起点对齐；
• flex-end：与交叉轴的终点对齐；
• center：在交叉轴上居中对齐；
• baseline：与其他所有盒子中的文本基线对齐；

示例代码：

.container {
  display: flex;
  align-items: center;
}

flex-wrap

此属性定义了Flexbox子元素是否可以换行。

• nowrap（默认值）：所有子元素在一行上排列；
• wrap：子元素可以分多行排列，不会压缩；
• wrap-reverse: 和wrap一样，但从尾部开始排列。

示例代码：

.container {
  display:flex;
  flex-wrap: wrap;
}

align-content

此属性定义了多行Flexbox子元素之间的对齐方式。

• stretch（默认值）：每一行拉伸到与容器高度相同的高度；
• flex-start：第一行在交叉轴上对齐起始位置，最后一行在交叉轴上对齐末端；
• flex-end：第一行在交叉轴上对齐末端位置，最后一行在交叉轴上对齐起始位置；
• center：各行在交叉轴上居中对齐；
• space-between：各行间间隔相等，第一行在交叉轴上对齐起始位置，最后一行在交叉轴上对齐末端；
• space-around：各行间间隔相等，每行前后具有空间。

示例代码：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

order

此属性定义了Flexbox子元素的排列顺序。

示例代码：

.box:first-child {
  order: 2;
}
.box:last-child {
  order: 1;
}

flex-grow

此属性定义了一个Flexbox子元素在空间充足时的放大比率。

示例代码：

.box:first-child {
  flex-grow: 2;
}
.box:last-child {
  flex-grow: 1;
}

flex-shrink

此属性定义了Flexbox子元素在空间狭缩时的缩小比率。

示例代码：

.box:first-child {
  flex-shrink: 1;
}
.box:last-child {
  flex-shrink: 2;
}

flex-basis

此属性定义了Flexbox子元素的最小尺寸。

示例代码：

.box {
  flex-basis: 100px;
}

flex

此属性是以上三个属性的简写，依次表示flex-grow、flex-shrink和flex-basis。

示例代码：

.box {
  flex: 2 1 100px;
}

总结

Flexbox是一个功能强大的CSS布局工具，可以让我们更轻松地对Web页面布局进行控制，无论是针对桌面端还是移动端。在使用Flexbox时，请注意Web浏览器的兼容性，以确保在不同的设备上都能正常显示。在实际开发中，我们可以通过实验样式来掌握这些布局属性的用法，以便于更快地完成前端开发工作。