Css 中 flex 弹性布局详解

共计 2344 个字符，预计需要花费 6 分钟才能阅读完成。

1. 概念

flex 是 CSS 的一种布局模式，它通过定义父容器 (flex container) 和子元素 (flex items) 之间的关系来创建灵活的布局。

1.1 容器-Flex Container

• 设置了 display: flex 或 display: inline-flex 称为容器。
• 它的所有直接子元素都会成为 flex items (弹性项目)。

1.2 弹性项目-Flex Items

• 所有弹性容器内的子元素。
• 这些子元素可以通过各种 flex 相关的 css 属性来控制对齐、排序和空间分配。

此案例外层 div 为容器，内层全为弹性项目。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<style>
.box {
    display: flex;
}
</style>

1.3 主轴与交叉轴

• 主轴：弹性项目的主要排列方向，默认是水平的（从左到右）。
• 交叉轴：与主轴垂直的方向，默认是垂直方向（从上到下）。

可以通过 flex-direction 改变主轴方向。

2. 容器属性

2.1 display

display 属性定义弹性容器。

• flex：块级弹性容器，元素占据整个宽度。
• inline-flex：行内弹性容器，容器只占据内容的宽度。

2.2 flex-direction

弹性项目在弹性容器中的排列方向（主轴方向）。

• flex-direction：从左到右
• row-reverse: 从右到左。
• column: 从上到下。
• column-reverse: 从下到上。

2.3 flex-wrap

弹性项目是否换行。

• nowrap: 不换行，所有项目都在同一行（默认）。
• wrap: 换行，项目会在行满后另起一行。
• wrap-reverse: 换行，但顺序与 wrap 相反。

2.4 justify-content

弹性项目在主轴上的对齐方式。

• flex-start: 从主轴起始处对齐（默认）。
• flex-end: 从主轴末端对齐。
• center: 居中对齐。
• space-between: 两端对齐，项目之间的间距相等。
• space-around: 每个项目两侧的间距相等，项目之间的间距是两边间距的两倍。
• space-evenly: 项目之间的间距和两端的间距都相等。

2.5 align-items

弹性项目在交叉轴上的对齐方式（针对单行）。

• stretch: 项目拉伸以填满容器（默认）。
• flex-start: 项目在交叉轴的起始处对齐。
• flex-end: 项目在交叉轴的末端对齐。
• center: 项目在交叉轴上居中。
• baseline: 项目基线对齐。

2.6 align-content

定义多行内容在交叉轴上的对齐方式（针对多行）。

• stretch: 行会拉伸以填满容器（默认）。
• flex-start: 行在交叉轴的起始处对齐。
• flex-end: 行在交叉轴的末端对齐。
• center: 行在交叉轴上居中。
• space-between: 行之间的间距相等。
• space-around: 每行两侧的间距相等，行之间的间距是两侧的两倍。

3. 弹性项目属性

3.1 order

• 控制项目的显示顺序，默认值为 0。
• 数字越小，项目越靠前，负数同样有效。

3.2 flex-grow

项目在容器中剩余空间的分配比例，默认值为 0。(即默认不占满容器)

• 比例越大，项目占据的剩余空间越多。
• 如果所有项目的 flex-grow 值相同，剩余空间将会均匀分配。

3.3 flex-shrink

项目在容器空间不足时的收缩比例，默认值为 1。（即空间不足时默认自动收缩容器，原来设置宽度为800，但实际会达不到）

• 比例越大，项目缩小得越多。
• 如果设置为 0，项目不会缩小。

3.4 flex-basis

项目的初始大小（主轴方向上的），默认值为 auto。

• 可以用具体的值如 px、% 或 auto。
• flex-basis 的值会覆盖 width 或 height 的值。

3.5 flex

flex-grow, flex-shrink 和 flex-basis 的简写形式。

• flex: none 等价于 flex: 0 0 auto。即元素不会放大，也不会缩小，元素的初始尺寸根据其内容、宽度/高度等自动决定。
• flex: auto 等价于 flex: 1 1 auto。容器空间有剩余时占满，不足时收缩。元素的初始大小由其内容、宽度/高度等因素自动决定（类似于常规布局时的大小），而不是固定为 0。
• flex: 1 等价于 flex: 1 1 0。即：容器空间有剩余时占满，不足时收缩。布局时先忽略元素内容的大小，然后再按 flex-grow 和 flex-shrink 规则调整。

3.6 align-self

允许单个项目对齐方式覆盖容器的 align-items 属性。

• auto: 使用容器的 align-items 设置（默认）。
• stretch: 拉伸以填充容器。
• flex-start: 在交叉轴起始处对齐。
• flex-end: 在交叉轴末端对齐。
• center: 在交叉轴居中对齐。
• baseline: 项目基线对齐。

测试代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

<style>
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 300px;
    border: 2px solid #333;
}

.item {
    width: 600px;
    height: 100px;
    background-color: lightcoral;
    margin: 10px;
}
</style>