给父容器设置 display: flex
- 父亲为
flex container - 子容器为
flex items
flex container 的属性 （设置在父容器上）
- flex-direction ：方向
- row （默认）
- row-reverse
- column
- column-reverse
- flex-warp ：换行
- nowarp （默认）
- warp
-
flex-flow ：方向 + 换行
是 flex-direction、flex-warp 的组合
例如 flex-flow： row nowarp -
justify-content ：沿主轴排列，设置在父容器上
- space-between ：空白在子元素之间，子元素两边贴上父元素
- space-around ： 空白环绕子元素，子元素两边与父元素有空白
- center ： 子元素贴在一起打包居中
- flex-start ： 子元素靠近主轴的起点
- flex-end ： 子元素靠近主轴的终点
- align-items ：沿侧轴排列，设置在父容器上
- stretch ：子元素伸展到等高，（默认）
- flex-start ：子元素靠近侧轴起点
- flex-end：子元素靠近侧轴终点
- center: 子元素垂直居中，不伸展
- align-content :多行/列内容对齐，把一整行/列看成整体分配
flex items 的属性 （设置在子元素上）
- flex-grow ：增长比例（空间过多时）
- 每个子元素设置一个 flex-grow：[数字]，多余空间按数字比例分配
- flex-shrink ：收缩比例（空间不够时），
- 类似 flex-grow，空间不够时，收缩的比例
- flex-basis ：默认大小（一般不用）
- flex ：上面三个的缩写
- 例如：flex: 1 2 100px
//第一个为grow，第二个为shrink，第三个为basis
- order ：指定子元素的显示顺序，每个子元素都要指定 order 才生效（取代圣杯双飞翼）
- align-self ：自身的对齐方式（不按父容器的来，自己特立独行）
网友评论