flex布局详解

flex 布局详解

一 、flex 基本知识介绍

flex 布局一共有两种属性
1.容器属性
2.项目属性

容器属性有：

display:flex;

flex-direction:row（默认值） | row-reverse | column |column-reverse

flex-wrap:nowrap（默认值） | wrap | wrap-reverse

justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly

align-items:stretch（默认值） | center  | flex-end | baseline | flex-start

align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

flex-direction: 设置项目排列方向

1.row 从左向右排列 （x轴的排列）
2.row-reverse 从右向左排列 （x轴的排列）
3.column 从上向下排列 （y轴的排列）
4.column-reverse 从下向上排列 （y轴的排列）

flex-wrap: 设置项目是否换行显示

1. nowrap 不换行 （多个项目宽度总和超过100%会自动分配宽度一行显示）
2. wrap 自动换行 （会根据项目宽度自动换行）
3. wrap-reverse 换行之后倒序

justify-content: 设置项目x轴排列方式

1.flex-start: 左对齐
2.flex-end: 右对齐
3.center: 居中对齐
4.space-between: 两边对齐 （一行展示偶数位的项目才能看出最佳效果）
5.space-around: 自动分配间隔（项目两边的间隔是中间间隔的一半）
6.space-evenly: 自动分配间隔（项目间隔是一致的）

align-content: 设置项目y轴对齐方式 (多行排列时才生效)

1.stretch 未设置项目尺寸时会自动拉伸项目高度填满容器
2.flex-start 顶部对齐
3.flex-end 底部对齐
4.center 居中对齐
5.space-between 两边对齐（y轴方向的）
6.space-around 自动分配间隔（项目两边的间隔是中间间隔的一半）
7.space-evenly: 自动分配间隔（项目间隔是一致的）

align-items: 设置项目在行中的对齐方式（行中）

1.stretch 项目拉伸至填满行高
2.flex-start 项目顶部与行起点对齐
3.flex-end 项目底部与行终点对齐
4.center 项目在行中居中对齐
5.baseline 项目的第一行文字的基线对齐

项目属性有：

order:0（默认值） | <integer>

flex-shrink:1（默认值） | <number>

flex-grow:0（默认值） | <number>

flex-basis:auto（默认值） | <length>

flex:none | auto | @flex-grow @flex-shrink @flex-basis

align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

order: 设置项目沿x轴的排列顺序，数值越小越靠前

1. order: 0

flex-shrink: 当项目溢出时，按比例缩放项目

1. flex-shrink: 1

flex-grow: 设置项目扩张因子，会自动补全剩余空间

1. flex-grow: 1

flex-basis: 设置项目的宽高优先级高于width 和 height

1. 当容器属性flex-direction:row | row-reverse 时，flex-basis优先级高于width
2. 当容器属性flex-direction:column | column-reverse 时，flex-basis优先级高于height

flex: 是flex-grow，flex-shrink，flex-basis的简写方式

1. flex: 值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

align-self：设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items

1. 若父容器设置了align-items时 align-self:auto

更详细的文档可以参考微信

flex 文档： flex文档链接