布局
网页布局 (layout) 是 CSS 的一个重点应用。
布局的传统解决方案，基于盒模型，通过 display: inline | block | inline-block 属性、position属性、float来实现布局，缺乏灵活性且有些适配效果难以实现。
Flex 布局 - 称之为“弹性布局”
2009年，w3c提出了一种新的方案 - Flex 布局。肯有简便、完整、响应式的实现各种页面布局。浏览器支持成度：Chrome21+、Opera12.1+、Firefox22+、Safari6.1+、IE10+
提醒: 任何容器都肯有指定为 Flex 布局 display: flex; 行内元素也肯有使用 Flex 布局 display: inline-flex; Webkit 内核的浏览器必须加上 -webkit 前缀；
注意：设为 Flex 布局以后，子元素的 flex、clear和vertical-align属性将失效
Flex 布局基本概念
- 采用 Flex 布局的元素， 称为 Flex 容器 (flex container)，简称 "容器"。
- 它的所有子元素自动成为容器成员，称为 Flex 项目 (flex item)，简称 "项目"。
容器默认存在两根轴：
- 水平方向的 x 轴 称为 主轴 ( main axis )
- 垂直方向的 y 轴 称之为 交叉轴 ( cross axis )
设置容器的属性有:
设置容器, 用于统一管理容器内项目布局, 也就是管理项目的排列方式和对齐方式
/* 将容器设置为 Flex 布局 */
display: flex;
/* 通过设置坐标轴, 来设置项目排列方向 */
flex-direction: row(默认) | row-reverse | column | column-reverse;
row: 默认值, 水平方向, 从左到右排列
row-reverse: 水平方向, 从右到左排列
column: 垂直方向, 从上到下排列
column-reverse: 垂直方向, 从下到上排列
/* 设置是否允许项目多行排列, 以及多行排列时换行的方向 */
flex-wrap: nowrap(默认) | wrap | wrap-reverse;
nowrap: 默认值, 不换行。如果单行内容过多, 则溢出容器。
wrap: 换行, 第一行在上方
wrap-reverse: 换行, 第一行在下方
/* 设置项目在主轴方向上对其方式，以及分配项目之间及周围多余的空间 */
justify-content: flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-state: 默认值, 左对齐, 项目间不留空隙
flex-end: 右对齐, 项目间不留空隙
center: 居中排列, 项目间不留空隙
space-between: 两端对齐, 项目之间的间隔都相等
space-arond: 第一个项目的起点和最后一个项目的终点离主轴的距离是中间项目间距的一半
space-evenly: 项目和项目及主轴的边距离均等
/* 设置项目在行中的对齐方式 */
align-items: stretch(默认) | flex-start | center | flex-end | baseline;
stretch: (默认值) 项目拉伸至填满行高
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的居中对齐
baseline: 项目的第一行文字的基线对齐
/* 多行排列时, 设置行在交叉轴方向的对齐方式, 以及分配行之间及周围多余的空间 */
align-content: stretch(默认) | flex-start | center | flex-end | space-between | space-around | space-evenly;
stretch: 默认值, 当未设置项目尺寸, 将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸, 项目尺寸不变, 项目行拉伸至填满交叉轴
flex-start: 首行在交叉轴起点开始排列, 行间不留间距
center: 行在交叉轴中点排列, 行间不留间距, 首行和尾行离容器距离相等
flex-end: 尾行在交叉轴终点开始排列, 行间不留间距
space-between: 行与行间距相等, 首尾和容器距离为0
space-around: 行与行间距相等, 首尾和容器距离是行与行间距的一半
space-evenly: 首尾和容器及行与行的距离都相等
设置项目的属性有
设置项目, 用于设置项目的尺寸、位置, 以及对项目的对齐方式做特殊设置
/* 设置项目沿主轴方向上的排列顺序, 数值越小, 排列越靠前, 属性值为整数 */
order: 0(默认)
/* 设置项目的缩小比例, 默认为1, 如空间不足, 该项目将缩小 */
flex-shrink: 1(默认)
注意: 如果所有项目属性都为1, 当空间不足时, 都将等比例缩小。如果一个项目的属性为0, 其他为1, 则空间不足时, 前者不缩小。负值对该属性无效
/* 设置项目的放大比例, 默认为0, 如果存在剩余空间, 也不放大 */
flex-grow: 0(默认)
注意: 如果所有项目属性为1, 则等分剩余空间。如一个项目的属性为2, 其他为1, 则前者占据的剩余空间将比其他项多一倍
/* 设置项目占据的主轴空间 */
flex-basis: auto(默认)
注意: 当flex-basis 和 width\height, 其中一个属性值为auto时, 非auto的优先级更高
/* 多个属性的简写形式 */
flex: none | auto | @flex-grow @flex-shrink @flex-basis;
注意: flex 是 flex-grow、flex-shrink、flex-basis 的简写形式
none 等价于 0 0 auto;
auto 等价于 1 1 auto;
/* 设置项目在行中交叉轴上的对齐方式 */
align-self: auto(默认) | flex-start | flex-end | baseline | stretch;
注意: 属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性。默认 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch
学习参考网站
以上笔记均为抄录仅为加深理解...