flex布局

flex即 Flexible Box ，弹性盒子布局

一、基本概念

作用

• 自动弹性伸缩，自适应不同尺寸的屏幕
• 精确灵活控制块级元素的布局方式，避免脱离文档流

设置方式

• 给父元素添加 display:flex 属性，子元素就可以自动挤压拉伸

组成部分

• 弹性容器
• 弹性盒子
  

二、容器属性

• justify-content
• align-items
• flex-direction
• flex-wrap

3.1 justify-content 定义了项目在主轴（侧轴）上的对齐方式

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

3.2 align-items 定义项目在交叉轴上的对齐方式

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

3.3 flex-direction 修改主轴方向属性

• row（默认值）：主轴为水平方向，从左向右
• row-reverse：主轴为水平方向，从右向左
• column：主轴为垂直方向，从上向下
• column-reverse：主轴为垂直方向，从下向上

3.4 flex-wrap

• nowrap（默认）：不换行
• wrap：换行，从左向右，从上向下
• wrap-reverse：从左向右，从下向上