flex布局介绍

Flex 布局详解

一、display 模式转换

display 属性用于控制元素的显示模式，决定元素如何参与页面布局。

1. display: block

.block-element {
  display: block;
}

• 是否独占一行：是
• 能否设置宽高：是
• 默认宽度：撑满父容器宽度

<div class="box">
  <div class="block-element">块级元素1</div>
  <div class="block-element">块级元素2</div>
</div>

.block-element {
  display: block;
  width: 200px;
  height: 50px;
  background-color: #f00;
}

2. display: inline

.inline-element {
  display: inline;
}

• 是否独占一行：否
• 能否设置宽高：否
• 默认宽度：由内容决定

<span class="inline-element">行内元素1</span>
<span class="inline-element">行内元素2</span>

.inline-element {
  display: inline;
  /* width 和 height 设置无效 */
  color: blue;
}

3. display: inline-block

.inline-block-element {
  display: inline-block;
}

• 是否独占一行：否
• 能否设置宽高：是
• 默认宽度：由内容决定（可覆盖）

<div class="container">
  <span class="inline-block-element">行内块元素1</span>
  <span class="inline-block-element">行内块元素2</span>
</div>

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 40px;
  background-color: #0f0;
}

4. 行内块元素的空白缝隙问题

行内块元素之间会有空白缝隙，可通过给父元素设置 font-size: 0 来去除。

.container {
  font-size: 0; /* 去除子元素之间的空白缝隙 */
}
.inline-block-element {
  display: inline-block;
  font-size: 16px; /* 恢复子元素字体大小 */
}

二、弹性盒子（Flexbox）基础

Flexbox 是 CSS 弹性盒子布局模块，可以快速实现元素的对齐、分布和空间分配。

核心概念

1. 父盒子（容器）：控制子盒子如何排列布局
2. 子盒子（项目）：被容器控制的子元素
3. 主轴：默认水平方向，可更改
4. 交叉轴：默认垂直方向，与主轴垂直

三、容器（父盒子）属性

1. display

定义元素为 Flex 容器。

.container {
  display: flex;
}

2. flex-direction

定义主轴方向（项目排列方向）。

.container {
  flex-direction: row;              /* 默认值，水平从左到右 */
  flex-direction: row-reverse;      /* 水平从右到左 */
  flex-direction: column;           /* 垂直从上到下 */
  flex-direction: column-reverse;   /* 垂直从下到上 */
}

3. flex-wrap

控制项目是否换行。

.container {
  flex-wrap: nowrap;        /* 默认值，不换行，项目会被压缩 */
  flex-wrap: wrap;          /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse;  /* 换行，第一行在下方 */
}

4. justify-content

定义主轴上的对齐方式（整体分布）。

.container {
  justify-content: flex-start;      /* 默认值，左对齐 */
  justify-content: flex-end;        /* 右对齐 */
  justify-content: center;          /* 居中 */
  justify-content: space-between;   /* 两端对齐，项目之间间隔相等 */
  justify-content: space-around;    /* 每个项目两侧间隔相等 */
}

5. align-items

定义交叉轴上的对齐方式（单行时生效）。

.container {
  align-items: stretch;       /* 默认值，项目未设置高度时占满容器高度 */
  align-items: flex-start;    /* 交叉轴起点对齐 */
  align-items: flex-end;      /* 交叉轴终点对齐 */
  align-items: center;        /* 交叉轴中心对齐 */
  align-items: baseline;      /* 项目基线对齐 */
}

6. align-content

定义多行时交叉轴上的对齐方式（仅当 flex-wrap: wrap 且内容换行时生效）。

.container {
  align-content: stretch;          /* 默认值，各行占满剩余空间 */
  align-content: flex-start;      /* 各行向交叉轴起点对齐 */
  align-content: flex-end;        /* 各行向交叉轴终点对齐 */
  align-content: center;          /* 各行向交叉轴中心对齐 */
  align-content: space-between;   /* 各行之间间隔相等 */
  align-content: space-around;    /* 各行两侧间隔相等 */
}

四、项目（子盒子）属性

1. order

定义项目的排列顺序（默认 0，数值越小越靠前）。

.item {
  order: -1;  /* 该项目会排在最前面 */
}

2. flex-grow

定义项目的放大比例（默认 0，即不放大）。

.item {
  flex-grow: 1;  /* 项目等分剩余空间 */
}

3. flex-shrink

定义项目的缩小比例（默认 1，空间不足时等比缩小）。

.item {
  flex-shrink: 0;  /* 不缩小，保持原大小 */
}

4. flex-basis

定义项目在主轴方向上的初始大小（优先级高于 width/height）。

.item {
  flex-basis: 200px;  /* 项目占据 200px 的主轴空间 */
}

5. flex

flex-grow、flex-shrink、flex-basis 的简写。

.item {
  flex: 1;       /* 相当于 flex: 1 1 0% */
}

6. align-self

覆盖容器的 align-items，单独定义某个项目的交叉轴对齐方式。

.item {
  align-self: auto;      /* 继承父元素的 align-items，默认值 */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

五、Flex 布局工作原理

容器设置 display: flex 后：

1. 如果子元素有大小，则按照给定大小显示
2. 如果子元素没有大小，则拉伸充满容器
3. 若子元素总宽度超过容器宽度，默认会压缩子元素

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #eee;
}
.item {
  width: 150px;
  height: 50px;
  background-color: #00f;
  margin: 5px;
}

.html