Flex布局学习
Flex(弯曲；屈伸；活动)
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。
flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思
弹性盒子是一种用于按行或按列布局元素的一维布局方法; 元素可以膨胀以填充额外的空间, 也可收缩以适应更小的空间;
使用Flexbox来进行布局的方案称之为flex布局(flex layout)
为什么使用Flex布局？
任何技术以及方案的出现都是为了弥补之前的缺陷，作为一种更优解。
传统的布局方案使用标准流、浮动和定位，基于盒子模型实现网页布局。
如何要在父子盒子中实现子元素垂直居中？
——传统布局可用 position + transform
那如何使父级容器（container）内的所有子元素等分父级宽度or高度?
又如何使父级容器内的所有子元素等间隙分布?
……
新的方案flex布局更加灵活，可以更简便、响应式地实现以上页面布局。
Flex布局中的重要概念(两对象,两轴,两线)
两对象:flex container(容器)和flex item(项目)
flex container(容器)
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
flex： flex container 以 block-level 形式存在
inline-flex： flex container 以 inline-level 形式存在
flex item(项目)
当flex container中的子元素变成了flex item时, 具备一下特点:
flex item的布局将受flex container属性的设置来进行控制和布局;
flex item不再严格区分块级元素和行内级元素;
flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
模型(两轴两线)
容器默认存在两根轴：水平的 主轴（main axis） 和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。(start起始线,end结束线)
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
给父级容器设置的属性
1.flex-direction
flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布 我们可以通过设置主轴和交叉轴来控制子元素的排序方式
flex-direction 可以设置 main axis 的方向，有 4 个取值
row（默认值）、row-reverse、column、column-reverse
flex-wrap
默认情况下，项目在水平方向上都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap 设置 flex container 是单行展示or多行展示
取值有: nowrap、 wrap、 wrap-reverse
（1）nowrap（默认）：单行,不换行。
(2) wrap：多行
(3)wrap-reverse：多行（对比 wrap，cross start 与 cross end 反转)
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
书写随意,flex-direction属性和flex-wrap属性先后位置任意,都可省略(取默认值)
justify-content
justify-content定义 flex items(项目) 在 main axis(主轴) 上的对齐方式,
取值有:
flex-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 之间距离的一半
space-evenly：
flex items 之间的距离相等
flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离
align-items
align-items属性定义项目在交叉轴上如何对齐。
normal：在弹性布局中，效果和stretch一样
stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与基准线对齐
align-content
align-content属性定义了多根轴线 在 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 之间的距离
给子级项目设置的属性
align-self
flex items 的align-self属性允许单个项目有与其他项目不一样的对齐方式，可以通过 align-self 覆盖 flex container 设置的 align-items
auto（默认值）：遵从 flex container 的 align-items 设置
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致
order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
可以设置任意整数（正整数、0、负整数）
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 * flex-grow / sum
flex items 扩展后的最终 size 不超过 max-width\max-height
flex-shrink(缩小)
flex-shrink 设置 flex items 如何收缩/缩小
可以设置任意非负数字（0、正小数、正整数），默认值是 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-basis属性定义了在分配多余空间之前，项目(flex items)占据的主轴空间(在 main axis 方向上的 base size)。浏览器根据这个属性，计算主轴是否有多余空间。
它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
auto（默认值）、具体的宽度数值（比如300px）
决定 flex items 最终 base size 的因素，从优先级高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的 size
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的合写，
默认值为0 1 auto。后两个属性可选。
flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。
该属性有三个快捷值：auto (1 1 auto) 和 none (0 0 auto)和initial(0 1 auto) 。
单值语法: 值必须为以下其中之一:
一个无单位数(): 它会被当作flex-grow的值。
一个有效的宽度(width)值: 它会被当作 flex-basis的值。
关键字none，auto或initial。
双值语法: 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
第二个值必须为以下之一：
一个无单位数：它会被当作 flex-shrink 的值。
一个有效的宽度值: 它会被当作 flex-basis的值。
三值语法:
第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
第三个值必须为一个有效的宽度值， 并且它会被当作 flex-basis 的值。