flex布局

flex 是 flexible box的缩写，即弹性盒模型，顾名思义为盒模型提供更加弹性（灵活性）的布局方案。

盒模型： 所有 HTML 元素都可以视为一个盒子，该盒子包括：边距(margin)、边框(border)、填充(padding)和实际内容(content)

flex布局包含的元素通常用容器和项目来称呼，设置flex布局（display: flex）的元素称为flex容器 (container)，容器内包含的子元素称为flex项目(item)。

二、flex布局属性

容器属性

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

项目属性

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

2.1 flex-direction 属性

项目沿主轴方向排列，flex-direction 属性决定主轴的方向。

容器有主轴和与主轴垂直的交叉轴，默认主轴是水平方向。（不要误以为主轴就是横轴）

css

复制代码

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

• row (默认值)：水平方向，项目从左往右排列
• row-reverse：水平方向，项目从右往左排列
• column：垂直方向，项目从上往下排列
• column-reverse：垂直方向，项目从下往上排列

2.2 flex-wrap 属性

决定在主轴方向项目排列不下时是否换行，默认不换行。

css

复制代码

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

• nowrap (默认值)：不换行
• wrap：换行，第一行在上面（主轴是水平方向，反之第一行是在左边)
• wrap-reverse：换行，第一行在下面（主轴是水平方向，反之第一行是在右边)

2.3 flex-flow 属性

默认flex-flow：row nowrap; 可以看出 flex-flow 属性是flex-direction 和flex-wrap的合并简写形式。需要设置这两个值时优先使用简写形式。

css

复制代码

.box { flex-wrap: <flex-direction> <flex-wrap>; }

2.4 justify-content 属性

justify-content属性决定项目在主轴上的对齐方式。

css

复制代码

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

• flex-start (默认值)：主轴起点对齐
• flex-end：主轴终点对齐
• center：主居中对齐
• space-between：两端对齐，两两项目之间间距相等
• space-around: 各项目左右间距相等，所以中间项目间距比两端大一倍
• space-evenly: 各项目均分容器空间（左右端也会有同等间距，但是该属性兼容性不太好，使用时注意）

2.4 align-items 属性

align-items 意为垂直方向，交叉轴对齐。align-items属性决定项目在在交叉轴上的对齐方式。

css

复制代码

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

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