弹性布局详解

基本概念

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式，主要表现在：
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器

常用属性

1、容器属性

1、display

• 作用：定义容器为弹性布局
  • flex： 块级弹性容器
  • inline-flex：行内弹性容器

.container {display: flex; /* 或 inline-flex */
}

2、flex-direction

• 作用：定义主轴方向，决定子项的排列方向。
• 值：
  • row（默认）：水平从左到右
  • row-reverse：水平从右到左
  • column：垂直从上到下
  • column-reverse：垂直从上到下

.container {flex-direction: column; /* 垂直排列 */
}

3、flex-warp

-作用：控制子项超出容器时是否换行

• 值：
  • nowrap（默认）：不换行，可能压缩子项
  • wrap：换行，新行位于下方
  • wrap-reverse：换行，新行位于上方。

.container {flex-wrap: wrap; /* 自动换行 */
}

4、flex-flow：

• 作用：flex-direction和flex-wrap的简写
• -语法：flex-flow：

.container {flex-flow: row wrap; /* 水平排列，自动换行 */
}

5、justify-content

• 作用：定义子项在主轴上的对齐方式
• 值
  • flex-start（默认）左对齐（主轴起点）
  • flex-end：右对齐
  • center:居中对齐
  • space-between：两端 对齐 ，间距均分
  • space-around：每个子项两侧间距相等（相邻间距为单边的2倍），
  • space-evenly：所有间距完全相等

.container {justify-content: space-between; /* 两端对齐 */
}

6、aligin-items

• 作用：定义子项在交叉轴上的对齐方式（单行）
• 值
  • stretch（默认）： .box 未设置固定高度，自动拉伸填满父容器高度（200px）。
  • flex-start：交叉起点对齐。
    • 子元素 .box 固定高度为 50px，顶部对齐父容器。
    • 表现：所有盒子紧贴容器顶部，下方留出空白。
  • flex-end：交叉轴终点对齐
    • 子元素 .box 固定高度为 80px，底部对齐父容器。
    • 表现：所有盒子紧贴容器底部，上方留出空白。
  • cetner：居中对齐
  • baseline：基线对齐（文本底部对齐）

.container {align-items: center; /* 垂直居中（主轴为水平时） */
}

7. align-content

• 作用：定义多行在交叉轴上的对齐方式（需配合 flex-wrap: wrap）。
  值：
• stretch（默认）：拉伸填充交叉轴。
• flex-start：起点对齐。
• flex-end：终点对齐。
  center：居中对齐。
• space-between：两端对齐，间距均分。
• space-around：每行两侧间距相等。

2、 项目属性

1. order

• 作用：定义子项的排列顺序（数值越小越靠前）。
• 默认值：0。

.item {order: 2; /* 排在 order 为 0、1 的元素之后 */
}

2. flex-grow

• 作用：定义子项在剩余空间中的拉伸比例。
• 默认值：0（不拉伸）。
• 示例：若所有子项的 flex-grow 均为 1，则平均分配剩余空间。

.item {flex-grow: 2; /* 比 flex-grow 为 1 的元素多占一倍空间 */
}

3. flex-shrink

• 作用：定义子项在空间不足时的收缩比例。
• 默认值：1（允许收缩）。
• 示例：flex-shrink: 0 表示不收缩。

.item {flex-shrink: 0; /* 空间不足时不收缩 */
}

4. flex-basis

• 作用：定义子项的初始大小（主轴方向）。
• 默认值：auto（元素内容大小）。
  值：
• 具体数值（如 100px、50%）。
  content：基于内容自动计算。

.item {flex-basis: 200px; /* 初始宽度为 200px */
}

5. flex

• 作用：flex-grow、flex-shrink 和 flex-basis 的简写。
• 常用值：
  • flex: 1：等价于 flex: 1 1 0（均分空间）。
  • flex: auto：等价于 flex: 1 1 auto。
  • flex: none：等价于 flex: 0 0 auto（固定大小）。

.item {flex: 1 2 300px; /* 可拉伸、可收缩、初始大小 300px */
}

6. align-self

• 作用：覆盖容器的 align-items，单独定义子项的交叉轴对齐方式。
• 值：同 align-items（auto、stretch、flex-start 等）。

.item {align-self: flex-end; /* 单独底部对齐 */
}

应用场景

1、水平 / 垂直居中：

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

2、自适应布局：

.sidebar {flex: 0 0 200px; /* 固定宽度 200px */
}
.main-content {flex: 1; /* 剩余空间自适应 */
}

3、等高布局：

.container {display: flex;
}
.item {align-self: stretch; /* 默认拉伸高度相等 */
}

4、响应式换行：

.container {display: flex;flex-wrap: wrap;
}
.item {flex-basis: 25%; /* 每行4个，自动换行 */
}