flex 布局

1. 常见父项属性

1) flex-direction

设置主轴的方向

值	描述
row	默认值;从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

2) justify-content

设置主轴上子元素排列方式

注:使用这个属性之前要先确定主轴是 x 轴(横轴)还是 y 轴(纵轴)

值	描述
flex-start	默认值从头部开始 如果主轴是 x 轴,则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是 x 轴 则水平居中)
space-around	平分剩余空间(靠两边元素**外间距**为内部元素间距的一半)
space-between	先两边贴边 再平分剩余空间(重要)
space-evenly	平分剩余空间(所有元素等距)

space-around 和 space-evenly 的区别

3) flex-wrap

设置子元素是否换行(默认不换行)

值	描述
nowrap	**默认值;**不换行
wrap	换行
wrap-reverse	项目会以反方向换行

4) align-items

设置侧轴上的子元素排列方式(单行)

值	描述
flex-start	**默认值;**从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸(子元素不能设置高度,否则无效果)
baseline	项目的第一行文字的基线对齐。

5) align-content

设置侧轴上的子元素的排列方式(多行)

值	描述
stretch	默认值。行拉伸以占据剩余空间。
center	朝着弹性容器的中央对行打包。
flex-start	朝着弹性容器的开头对行打包。
flex-end	朝着弹性容器的结尾对行打包。
space-between	行均匀分布在弹性容器中。
space-around	行均匀分布在弹性容器中，两端各占一半。

6) flex-flow

复合属性,相当于同时设置了 flex-direction 和 flex-wrap

值	描述
flex-direction	可能的值：row, row-reverse ,column,column-reverse 默认值为 "row"。规定弹性项目的方向。
flex-wrap	可能的值：nowrap,wrap,wrap-reverse默认值为 "nowrap"。规定弹性项目是否应换行。

2. 常见的子项属性

1) flex

子项目占的份数

2) align-self

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

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。

3) order

定义项目的排列顺序。数值越小，排列越靠前，默认为 0