flex布局从入门到上天

来源：coderwhy老师

认识flex布局

flex即flexible

美: ['fleksəb(ə)l]
英: ['fleksəb(ə)l]
adj. 能适应新情况的；灵活的；可变动的；柔韧的
网络 易弯曲的；弹性；有弹性的

1. flex布局是目前web开发中使用最多的布局方案：
   • flex布局（Flexible布局，弹性布局）
   • 目前特别在移动端用的最多，目前PC端也使用越来越多了
2. 两个重要的概念：
   • 开启了flex布局的元素叫flex container
     -Flex container 里面的直接子元素叫做flex item
3. 在特定的class里面设置display属性为flex或者inline-flex可以成为flex container：
   如：

   .box {
   	margin: 0 auto;
   	display: flex;
   }
   

   • flex: flex container 以block-level形式存在（块级元素）
   • inline-flex: flex container以inline-level形式存在（行内元素），（类似于强制不换行）

$图1-flexible简介和支持的浏览器(及其版本号)$

flex布局模型

$图2-flexible布局模型解析图$
axis : 英 [ˈæksɪs] 轴
main axis是主轴，不叫x轴
cross axis是交叉轴，不叫y轴
main轴的起点main start，main轴的终点main end
cross轴的起点cross start，cross轴的终点cross end

main主轴是可以变的（说浅一点的话，main轴是x轴，也可以变成y轴），

flex相关的属性

应用在flex container上的css属性:

flex-direction（针对main主轴）

flex items默认都是沿着main axis(主轴)从main start 开始往main end 方向排布。
flex-direction决定了main axis(主轴) 的方向，有4个取值，分别为：
row（默认值): 从左到右
row-reverse: 在row的基础做一个反向
column: 从上到下（将主轴方向箭头方向改为从上往下）(main start在上，main end在下)(这里并不是指cross轴)
column-reverse: 从下到上（将主轴方向箭头改为从下往上）(main start在下，main end在上)（非cross轴）
$图3-针对main主轴的flex-direction属性设置值的4种情况$

flex-wrap

flex-wrap 决定了flex container 是单行还是多行：
nowrap(默认)： 单行显示（item过多的时候，会拥挤变形）
wrap: 多行（item过多的话换行显示）
wrap-reverse: 多行(对比wrap，cross start 与 cross end相反)，这个用得少

flex-flow

flex-flow 是flex-direction || flex-wrap的缩写属性，可以省略，顺序任意。

justify-content(针对main主轴)

justify在英文中是两端对齐的意思,
justify-content决定了flex items在main axis主轴上的对齐方式:
flex-start(默认值) : 与main start 对齐(开始位置对齐)
flex-end: 与main end对齐
center: 居中对齐
space-between:
- flex items之间对距离相等
- 与main start，main end两端对齐
space-evenly:
- flex items之间对距离相等，将item平均分布
space-around:
- 中间的flex items之间距离相等，最左侧和最右侧的flex items靠近（偏）边缘，大边距是小边距的两倍
- 这space-around非常重要，基本上很多界面设计都会用到

align-items（针对cross交叉轴）

align-items 决定了flex items 在cross axis上的对齐方式：
normal: 在弹性布局中，效果和stretch一样(默认值)
stretch: 当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start: 与cross start 对齐
flex-end: 与cross end 对齐
center: 居中对齐
baseline: 与基准线(如多个div内有文字，文字底部为基准线，即使文字大小不一样，如果一个div里面有多行的话文字的话，以第1行为准)对齐

align-content（针对cross交叉轴）

在多行的时候用，单行的时候就没必要了
cross轴用align这个词来区别于main主轴的justify
align-content决定了多行flex items在cross axis交叉轴上的对齐方式，用法与justify-content类似
stretch:默认值，与align-items的stretch类似，这拉伸用得很少
flex-start: 与cross start 对齐
flex-end:与cross end 对齐
center:居中对齐
space-between: 如果是两行的话，效果是这两行各自紧贴上下边缘
- flex items之间的距离相等
- 与cross start，cross end 两端对齐
space-around:
- flex items之间的距离相等
- flex items与cross start，cross end之间的距离是flex items之间距离的一半
space-evenly:
- flex items之间的距离相等
- flex items与cross start，cross end之间的距离等于flex items之间的距离。

应用在flex items上的css属性：

flex

flex是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个或3个值。
单值语法：值必须为以下其中之一

• 一个无单位数(number)：它会被当作flex-grow的值。
• 一个有效的宽度(width)值：它会被当作flex-basis的值。
• 关键字none,auto或initial

双值语法：第一个值必须为一个无单位数，并且它会被当作flex-grow的值。

• 第二个值必须为以下之一：
  一个无单位数：它会被当作flex-shrink的值
  一个有效的宽度值：它会被当作flex-basis的值
  三值语法：
• 第一个值必须为一个无单位数，并且它会被当作flex-grow的值
• 第二个值必须为一个无单位数，并且它会被当作flex-shrink的值
• 第三个值必须为一个有效的宽度值，并且它会被当作flex-basis的值

flex-grow

flex-grow决定了flex items如何拓展：
可以设置任意非负数字（正小数，正整数，0），默认值是0
当flex container 在main axis方向上有剩余size时，flex-grow属性才会有效

• 如果所有flex items的flex-grow总和sum超过1，每个flex item拓展的size为：
  (flex container的剩余size) * (单个item里面flex-grow的值 / sum总和)

将每一个item都设置为flex-grow: 1；的话，该item会自动成长为合适的大小（诸如与其他item一起铺满一行）

• 如果所有flex items的flex-grow总和不超过1（把当个item看成是百分比），每个flex item拓展的size为：
  (flex container的剩余size) * (flex-grow)
  最终可能不会占满整行
  如：

.item2 { flex-grow: .2}

• 所有flex items拓展后的最终size不能超过max-width\max-height
  不能大于最大宽度

flex-basis

flex-basis用来设置flex items在main axis方向上的base size
也就是可以决定item在主轴方向上的大小

• auto(默认值)，具体的宽度数值（100px )，如果设置为auto的话，宽度是多少的话就是多少
  决定flex items最终base size的因素，从优先级高到低(重要)
• max-width \ max-height \ min-width \ min-height
• flex-basis
• width \ height
• 内容本身的size

假如同时设置了宽度width: 100px，flex-basis: 200px，那么width:100px将失效。如果此时flex-basis:auto，那么flex-basis相当于无效，也就是width \ height的优先级将高于flex-basis

flex-shrink

flex-shrink是上面flex-grow的反义，用于超过多个item的时候收缩（收缩不能盖住文字），它默认情况下就是收缩的。单个item收缩值小于1的用得非常少，大概因为不好控制。

• 可以设置任意非负数字（正小数，正整数，0），默认值是1(都是1的时候，收缩比例都是一样的)
• 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效

如果所有flex items的flex-shrink 总和超过1，每个flex item收缩的size为

• (flex item 超出flex container的size) * (本item收缩值 / 所有flex items的收缩值之和)

如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为

• flex items超出fl*container的size * sum * 收缩比例 / 所有flex items的收缩比例之和
• 收缩比例 = flex - shrink * flex item的base size
• base size 就是flex item 放入flex container 之前的size

flex items收缩后的最终size不能小于min-width\ min-height，收缩不能小于最小宽度或最小高度

order

order by之意
order 决定了flex items的排布顺序

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

align-self

这个多得不多
flex items可以通过align-self覆盖flex container设置的align-items

• auto(默认值):遵从flex container的align-items设置
• stretch，flex-start，flex-end，center，baseline，效果跟align-items一致

零碎知识片段

1. 前端兼容自检工具caniuse.com
2. iOS Safari用的是UIWebview，Android内置的是WebView
3. 使用样式margin: 0 auto可以使得div居中显示

最后再次感谢coderwhy老师提供的教学及其资料

其他参考：
Flex 布局语法教程-菜鸟教程