弹性盒和多列布局

弹性盒和多列布局

学习目标：

1. css3盒模型
2. 伸缩布局盒模型
3. 多列布局

一、css3盒模型

css3增加了盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。
box-sizing：content-box border-box

• content-box
  元素的宽 = width + padding + border

• border-box
  元素的宽 = width（包含padding和border）

二、伸缩布局盒模型

css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。

主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。

flexbox布局功能主要具有以下几点：

1. 屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
2. 指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
3. 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4. 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5. 控制元素在页面上的布局方向；
6. 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

flexbox模型中的专业术语：

1. 主轴和侧轴
2. 主/侧轴、侧/侧轴方向
3. 主/侧轴起点、主/侧轴终点
4. 主/侧轴长度
5. 伸缩容器(大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>。