CSS Flex弹性布局详解! (常用的12个属性)

这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局完整教程，文中梳理了Flex布局12个高频属性，文末附带实战小案例与完整代码，希望能帮大家吃透弹性布局。

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为「弹性布局」，属于一维布局方案，可以按行/列自由排布元素，为盒模型提供极高的灵活度。任意容器都可以设置为Flex布局。

Flex布局默认存在两条轴线：水平主轴、垂直交叉轴：

主轴（main size）是弹性容器的主排布轴线，子元素（items）沿主轴排列；主轴不一定是水平，由 flex-direction 控制。在学习前先区分两个核心概念：

1、外层容器：统一称为 container

2、容器内部子盒子：统一称为 items

二、Flex布局12个核心属性详解

先搭建基础演示结构，后续所有属性均基于此案例演示：

HTML代码

<div class="container">
  <div class="items1">1</div>
  <div class="items2">2</div>
  <div class="items3">3</div>
</div>

初始CSS代码

.container {
  height: 400px;
  width: 600px;
  background-color: #e1e1e1;
}

初始页面效果：

1. display: flex（容器开启弹性布局）

想要启用弹性布局，必须给外层容器 container 设置 display:flex;，内部子元素才会遵循Flex规则渲染。

.container{
   display:flex;
}

2. flex（子元素空间占比简写属性）

给内部items统一设置底色、边框，再添加flex属性控制空间分配：

.container div {
  background-color: #ffb84d;
  border: 2px solid #666;
}
.items1 {
  flex: 1;
}
.items2 {
  flex: 1;
}
.items3 {
  flex: 1;
}

页面效果：

三个盒子水平均分容器宽度，这是flex最基础用法。

修改items1的flex值为2：

flex代表盒子分配剩余空间的份数；若给某个盒子设置固定宽度，剩余盒子依旧按flex比例分配剩余区域：

Flex支持嵌套使用，示例：给items3内部新增两个子盒子，垂直均分：

.items3 {
  display:flex;
  flex-direction:column;
}
.items3-1 { flex:1; }
.items3-2 { flex:2; }

嵌套效果：

3. flex-direction（控制主轴排列方向）

给容器添加 flex-direction: column;，子元素会垂直排列：

该属性用于定义主轴方向，共4个可选值：

row（默认）：主轴水平，从左向右排布
row-reverse：主轴水平，从右向左反向排布
column：主轴垂直，从上向下排布
column-reverse：主轴垂直，从下向上反向排布

4. flex-wrap（控制子元素换行规则）

作用于容器，当子元素总宽度超出容器时，控制换行逻辑。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

默认值 nowrap：不换行，盒子自动压缩挤在一行；

设置 flex-wrap: wrap; 超出自动换行：

设置 flex-wrap: wrap-reverse; 换行且行顺序颠倒：

5. justify-content（主轴对齐方式）

容器属性，控制子元素在主轴上的水平对齐规则。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

各值效果示意图：

flex-start（默认）：左对齐
flex-end：右对齐
center：水平居中
space-between：两端贴边，元素间间隔均等
space-around：每个盒子两侧留白相等，盒子间距是边距2倍
space-evenly：盒子与边框、盒子之间间隔完全相等

基础无对齐效果：

justify-content: center 居中：

justify-content: space-between 两端对齐：

justify-content: space-evenly 均匀留白：

6. align-items（单行子元素交叉轴对齐）

容器属性，控制单行子元素在垂直交叉轴上的对齐方式。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

flex-start：紧贴交叉轴顶部
flex-end：紧贴交叉轴底部
center：垂直居中
baseline：按盒子内文字基线对齐
stretch（默认）：未设高度时自动拉伸填满容器高度

align-items: center 垂直居中：

align-items: flex-end 底部对齐：

align-items: baseline 文字基线对齐：

7. align-content（多行子元素交叉轴整体对齐）

容器属性，仅在子元素换行（flex-wrap: wrap）存在多行时生效，控制整行在交叉轴的排布，等同于主轴的justify-content。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

flex-start：所有行紧贴容器顶部
flex-end：所有行紧贴容器底部
center：多行整体垂直居中
space-between：首尾行贴顶底，行间距均等
space-around：每行上下留白相等，行间距是边距2倍
space-evenly：行与边框、行之间留白完全一致
stretch（默认）：多行拉伸填满容器高度

align-content: end：

align-content: space-between：

align-content: space-around：

align-content: space-evenly：

align-content: center：

8. order（子元素排序权重）

子元素属性，控制盒子排列顺序，数值越小越靠前，默认值0，支持负数。

.item {
  order: <integer>;
}

给items2设置 order:-1，会排到最左侧：

9. flex-grow（子元素剩余空间放大比例）

子元素属性，分配容器剩余空白空间，默认值0（不抢占空白）。

.item {
  flex-grow: 4; /* default 0 */
}

基础无放大效果：

items2:flex-grow:1、items3:flex-grow:2，剩余空间按1:2分配：

规则：所有flex-grow:1则均分剩余空间；数值越大分配到的空白越多。

10. flex-shrink（子元素空间不足缩小比例）

子元素属性，容器宽度不足时控制盒子压缩比例，默认值1（自动缩小），设为0则不压缩。

.item {
  flex-shrink: 3; /* default 1 */
}

容器600px，每个盒子固定宽300px，总宽度溢出，默认全部等比压缩：

items2设置 flex-shrink:2，压缩幅度更大：

11. gap / row-gap / column-gap（子元素间隙）

容器属性，设置子元素之间的间距，不会在容器内外边框产生留白。

.container {
  display: flex;
  gap: 10px;
  gap: 10px 20px; /* row-gap 行间距 column-gap 列间距 */
  row-gap: 10px;
  column-gap: 20px;
}

row-gap:20px 多行垂直间隙效果：

row-gap控制交叉轴行间距，column-gap控制主轴列间距。

12. align-self（单个子元素独立交叉轴对齐）

子元素专属属性，单独修改当前盒子的垂直对齐，覆盖容器align-items全局设置。默认auto继承父容器规则。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

参考资料

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

三、实战案例：Flex实现圣杯布局

掌握全部属性后，我们完成经典圣杯布局实战，效果图：

完整HTML+CSS代码：

<style>
  .container {
    height: 400px;
    width: 600px;
    border: 2px solid #000;
    text-align: center;
    color: #fff;
  }
  .header {
    height: 40px;
    color: #fff;
    background-color: #666666;
  }
  .part {
    height: 320px;
    color: #000;
    background-color: skyblue;
    display: flex;
  }
  .left {
    flex: 1;
    background-color: #77bbdd;
  }
  .center {
    flex: 2;
    background-color: #d6d6d6;
  }
  .right {
    flex: 1;
    background-color: #ff6633;
  }
  .footer {
    height: 40px;
    background-color: #666666;
  }
</style>
<div class="container">
  <div class="header">欢</div>
  <div class="part">
    <div class="left">迎</div>
    <div class="center">关</div>
    <div class="right">注</div>
  </div>
  <div class="footer">学编程的GISer</div>
</div>

四、下期预告

Grid网格布局和Flex弹性布局同为现代CSS核心布局方案，实现同款圣杯布局，Grid代码会更加简洁：

下期将完整讲解Grid网格布局，敬请期待。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-07-03，如有侵权请联系 fd860@qq..com 删除

博主