flex有两个核心：轴和容器。轴决定了布局的方向。容器决定了flex作用目标和范围。Flexbox布局最适合应用程序的组件和小规模布局（一维布局）
一。作用在flex容器上(6个）
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. flex-direction 值为： row row-reverse column column-reverse
row为默认值，为当前文档流水平流方向，一般为从左到右，row-reverse为反方向。
column 显示为列，column-reverse为反方向。
2. flex-wrap 值为 nowrap wrap wrap-reverse
nowrap，默认值，表示单行显示，不换行。在子项宽度之和超过容器时，表现为：显示为一行并溢出，或者压缩子项显示为一行不溢出。具体情况要看子项width 的min-content 和 fit-content
wrap，宽度不足时换行显示。
3. flex-flow 是flex-direction 和 flex-wrap的缩写同事表示这连个属性；
写法如下：flex-flow: row wrap;
4. justify-content 值为：flex-start flex-end center space-between space-around
决定了水平方向子项的对齐和分布。和text-align类似，不过前者控制flex元素对齐，后者控制内联元素对齐。
5.align-content 值为：stretch flex-start flex-end center space-between space-around space-evenly
和justify-content相似且对立。表示垂直方向每一行flex元素的对齐和分布
6.align-items 值为：stretch flex-start flex-end center baseline
和align-content看起来很像，但这里针对的是每一个子项item，而不是一行
二，作用在子项上的flex（6个）
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1.order 值为整数，默认0
表示某个子项的排序位置
2.flex-grow 值为正数（包括小数）和0，默认值是0(表示不扩展）
规则，容器剩余空间为1，flex-grow值小于1时，按值的比例增长扩展，大于1则占满。多个子项都设有flex-grow值并且总值大于1时，按他们的比例分配空间。
3.flex-shrink 值为正数（包括小数）和0，默认值是1（表示都收缩）0表示不收缩。主要处理当flex容器空间不足时候，单个元素的收缩比例
和flex-grow有点类似。flex-grow用在空间有多余。flex-shrink用在空间不够。
只一个子项设置flex-shrink,
- 值小于1，则收缩不完全，仍会有一部分溢出
- 值大于等于1，则完全收缩，正好填满。
有多个子项设置了flex-shrink
- 值得总和小于1，收缩不完全，每个元素按比例就是设置的值
- 值得总和大于等于1，收缩完全，每个元素按比例收缩
4. flex-basis 定义了分配剩余空间之前元素的默认大小。默认值为auto
5. flex
flex属性是flex-grow，flex-shrink和flex-basis的缩写。通常有3个写法
flex默认值，等同flex：0 1 auto;
flex:none，等同于flex: 0 0 auto;
flex:auto，等同于flex: 1 1 auto;
6.align-self
和align-items类似，不过align-items表示所有子项，align-self只表示自己。他们的用法一样。
值为：auto flex-start flex-end center baseline stretch
唯一的区别是多了auto这个值，表示继承flex容器的align-items属性值。
网友评论