告别对齐焦虑！Flex弹性布局让你轻松玩转页面排版

你是否经历过这些崩溃瞬间？

1、垂直居中一个div，写了10行CSS还是对不齐
2、多栏布局用float，最后总要加clearfix收尾
3、响应式布局要写一堆media query调整元素位置

Flex布局的诞生

2009年W3C推出的Flexible Box布局模块，彻底改变了传统网页布局方式。它通过弹性容器与弹性项目的配合，让元素能像弹簧般灵活适应不同屏幕尺寸，开发者只需几行代码就能实现过去需要复杂计算的布局效果。

1. 容器属性

.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-items: stretch;
flex-wrap: wrap | nowrap | wrap-reverse;
}

1.1 控制主轴方向

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

.box{
    flex-direction: row | row-reverse;
}

.box{
    flex-direction: column | column-reverse;
}

1.2 主轴对齐方式

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

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

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

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

1.3 交叉轴对齐

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

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

1.4 是否换行

• nowrap（默认值）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

2. 项目属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

2.1 order属性

控制项目在容器中的视觉顺序

.item { order: 整数; } /* 默认0 */

2.2 flex-grow属性

分配剩余空间的扩展比例

.item { flex-grow: 数值; } /* 默认0 */

2.3 flex-shrink属性

定义空间不足时的收缩比例

.item { flex-shrink: 数值; } /* 默认1 */

2.4 flex-basis属性

设置项目在分配空间前的初始尺寸

.item { flex-basis: auto | 长度; } /* 默认auto */

2.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写

.item { 
  flex: [grow] [shrink] [basis]; 
}

2.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

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

3. 四大高频使用场景

3.1 导航菜单

<nav class="flex-container">
  <div class="logo">LOGO</div>
  <div class="menu">首页</div>
  <div class="menu">产品</div>
  <div class="menu">关于</div>
  <div class="login" style="margin-left: auto">登录</div>
</nav>

3.2 等高列布局

.card-container {
  display: flex;
  align-items: stretch; /* 默认值，自动等高 */
}

3.3 完美垂直居中

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

3.4 响应式布局

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。