笔记|flex布局入门讲解 html|css3|css

flex布局特点

开启了flex布局的元素叫flex container（弹性容器）
flex container里面的直接子元素叫做flex item（弹性项目）

当flex container中的子元素变成了flex item时，具有以下特点

flex item的布局将受flex container属性的设置来进行控制和布局
flex item 不再严格区分块级元素和行内元素
flex item默认情况下时包裹内容的，但是可以设置宽度和高度

设置display属性为flex或者inline-flex可以成为flex container

flex： flex container以block-level形式存在
inline-flex： flex container以inline-level形式存在

flex item的宽度 flex container的属性 flex-direction
设置主轴的方向：

row(默认)：主轴从左往右
row-reverse：主轴从右往左
column：主轴从向至下
column：主轴从下至上

flex-wrap
设置当项目在一行排不下时候是否换行（flex container是单行显示还是多行）

nowrap（默认）：单行（不换行）
wrap：多行（换行）
wrap-reverse：多行（换行，顺序是由下到上）

flex-flow
flex-direction和flex-wrap的简写，顺序任意，每个值不是必写
flex-flow:<‘flex-direction’> || <‘flex-wrap’>
justify-content
设置项目在主轴（main axis）的对齐方式

felx-start(默认值)：与main start对齐
flex-end：与main end对齐
center：居中对齐
space-between：
- flex items之间的距离相等
- 与main start、main end两端对齐
space-around：
- flex items之间的距离相等
- flex items与main start、main end之间的距离是flex items（相邻的两个item之间的距离）之间距离的一半
space-evenly：兼容性差
- 两端也有空隙，并且所有的空间进行等分

align-items
设置（单行）flex item(项目)在cross axis（交叉轴）的对齐方式

normal（默认）：在弹性布局中，效果和stretch一样
stretch：当flex item 在cross axis 方向的size为 auto时，会自动拉伸至填充flex container(项目的高度是auto时才生效)
flex-start：与cross start对齐
flex-end：与cross end对齐
center：居中对齐
baseline：与基准线对齐

align-content
设置多行flex items在cross axis上的对齐方式，用法与justify-content类似

stretch(默认值)：与align-items的stretch类似
flex-start:
flex-end:
center:
space-between
space-around
space-evenly：兼容性差

flex-item的属性 flex-order
【笔记|flex布局入门讲解】设置flex item的排布顺序

可以设置任意整数，值越小就越排在前面
默认值是0

align-self
设置flex item在across axis的位置

默认值是normal

flex-grow
设置flex items如何扩展（拉伸/成长）
说明：当一个容器里面的项目排列完成，还剩下空间的时候，这些剩下的空间是不会分给项目，让项目填充的，如果设置了flex-grow:1，那么剩余的空间将都会分给设置这个属性的项目，如果一个项目设置了flex：1，一个设置了flex：2，那么剩余的空间将会被等分成3分，设置1的得到1份，设置2的得到2份

可以设置任意非负的数字（正小数、正整数、0）
默认值是0
当flex container在main axis方向有剩余的size时，flex-grow属性才会生效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的四则为
- flex container的剩余size*flex-grow/sum
flex items扩展后的最终size不能超过max-width/max-height
- 比如给一个项目设置了max-width\max-height,那么项目所分配的空间和项目的宽/高之和最多就是max-width\height

flex-shrink
决定了flex items如何收缩（缩小）
当项目在容器内水平排不下的时候，项目是否会被压缩

可以设置任意非负数字
默认值是1
当flex items在main axis方向上超过flex container的size，flex-shrink属性才会生效
如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为
- flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
flex items收缩后的最终size不能小于min-width/min-height

flex-basis
用来设置flex items 在main axis方向上的basis size（基础大小）
默认值是auto
举例：当给一个项目设置了width，里面的内容是一个英文单词的时候，当单词在最后一个的时候放不下整个单词会直接换行，如果设置了flex-basis时候，则不会换行，会自动拉伸当前项目的宽度，知道单词能放下
觉得flex-item最终的basis size的因素（优先级从上到下）