弹性盒和多列布局
弹性盒和多列布局
学习目标：
- css3盒模型
- 伸缩布局盒模型
- 多列布局
一、css3盒模型
css3增加了盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。
box-sizing：content-box border-box
-
content-box
元素的宽 = width + padding + border -
border-box
元素的宽 = width（包含padding和border）
二、伸缩布局盒模型
css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。
主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。
flexbox布局功能主要具有以下几点：
- 屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
- 指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
- 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
- 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
- 控制元素在页面上的布局方向；
- 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。
flexbox模型中的专业术语：
- 主轴和侧轴
- 主/侧轴、侧/侧轴方向
- 主/侧轴起点、主/侧轴终点
- 主/侧轴长度
- 伸缩容器(大div)和伸缩项目（子元素或内容）
弹性和模型的使用：
声明伸缩容器（父元素）：display：flex；需要加前缀
- display：-webkit-flex；
- display：-moz-flex；
- display：-ms-flex；
- display：-o-flex；
- display：flex；
伸缩项目（子元素）：
- -webkit-flex:1;
- -moz-flex:1;
- -ms-flex:1;
- -o-flex:1;
- flex:1;
伸缩容器属性：
1、伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向
- row：从左向右
- row-reverse：与row相反；
- column：从上到下
- column-reverse：与column相反；
2、伸缩换行 flex-wrap：
- nowrap 不换行 默认值，不管超出还是不超出都不会换行
- wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行
- wrap-reverse 换行反向 主轴水平时，上下反向，主轴垂直时，左右反向；
3、伸缩流方向与换行 flex-flow 缩写形式。
- flex-flow：flex-direction || flex-wrap
- 两个值同时定义或者单独定义都生效
4、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式；
- flex-start：伸缩项目向一行的起始位置靠齐；
- flex-end：伸缩项目向一行的结束位置靠齐；
- center：伸缩项目向一行的中间位置靠齐；
- space-between：伸缩项目会平均的分布在行里；
- space-around：伸缩项目会平均的分布在行里，两端保留一半的空间；
5、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式
- flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；
- flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；
- center：伸缩项目的外边距盒 在该行的侧轴上居中放置；
- baseline：伸缩项目根据伸缩项目的基线对齐；
- stretch：伸缩项目拉伸填充整个伸缩容器。
6、align-self（加上在子元素）：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items。
- flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；（元素位于容器的开头）
- flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（元素位于容器的结尾）
- center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（元素位于容器的中间）
- stretch：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）
7、堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 往往要与换行同时应用，没有换行就不存在多行的情况。
- flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）
- flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）
- center：各行向伸缩容器的中间位置堆叠；（居中没有行距）
- space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配）
- space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）
伸缩项目属性：
1、显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。
- 不定义order的伸缩项目会排到前面
- order：1； 排第一
- order：2； 排第二
三、多列布局
css3多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。
核心属性：
- columns：column-width 列宽 column-count 列数
- column-width：定义每列列宽； 类似于最小宽度min-width； auto 自适应；
- column-count：定义分列列数；最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定
- column-gap：定义列间距； 不能为负数；
- column-rule：定义列边框；与定义边框一样：2px dashed #ccc;
- column-span：定义多列布局中子元素的跨列效果；通常用于标题；
- none：不跨列；
- all：跨所有列
main:标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
