1.多栏布局
使用float或position进行页面布局时，有个比较显著的缺点，元素之间是各自独立的，因此经常底部不能对齐，导致页面中出现一块空白区域。使用多栏布局，可以将一个元素中的内容分为两栏或多栏去显示。
- 元素内部使用多栏布局（指定元素总宽度，多栏均分宽度）：
div#div1{
width: 40em; // 指定元素总宽度
column-count: 2; // 指定内部分成两栏
-moz-column-count: 2; // FireFox
-webkit-column-count: 2; // Safari、Chrome、Opera
}
- 元素内部使用多栏布局（不指定元素总宽度，指定每栏宽度）：
// 元素如果没设定总宽度，则外面要套个容器元素
div#container{
width: 42em;
}
div#div1{
column-count: 2; // 指定元素内部分两栏
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 20em; // 指定每栏宽度
-moz-column-width: 20em;
-webkit-column-width: 20em;
}
- 还可以指定多栏之间的间隔距离，以及间隔线：
div#div1{
column-count: 2; // 指定元素内部分两栏
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 20em; // 指定每栏宽度
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-gap: 3em; // 指定栏之间间隔距离
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
column-rule: 1px solid red; // 指定栏之间分隔线
-moz-column-rule: 1px solid red;
-webkit-column-rule: 1px solid red;
}
使用多栏布局时，各栏宽度是相等的。也不可能具体指定什么栏中显示什么内容，因此比较适合用在显示文章内容的场景，不适合用于布局网页结构。
2. 盒布局
除多栏布局外，还可以使用盒布局解决使用float或position时多栏底部不能对齐的问题。
- 使用float的旧方式（底部不对齐）：
#left-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
float: left;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
- 使用盒布局：
#container{
display: -moz-box; // 指定使用盒布局 FireFox
display: -webkit-box; // Safari、Chrome、Opera
}
#left-sidebar{ // 删除float
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{ // 删除float
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{ // 删除float
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
3. 弹性盒布局
在使用盒布局时，我们对各区块是单独设定宽度的。如果想让区块的总宽度等于浏览器的宽度，并且能随着窗口宽度的改变而改变，那么弹性盒布局就派上用场了。因此相比盒布局，弹性盒布局用来布局整个网页总体结构无疑是更佳的。
- 将盒布局改成弹性盒布局：
#container{ // box改成flex
display: flex;
}
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{ // 去除中间栏的宽度，改成flex属性
flex: 1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
- 使用order属性改变元素的显示顺序（内容在最左边，右栏在中间，左栏在最右边）：
#container{
display: flex;
}
#left-sidebar{
order : 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
order: 1;
flex: 1; // 是flex-grow、flex-shrink 和 flex-basis的缩写
padding: 20px;
background-color: yellow;
}
#right-sidebar{
order: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
flex 属性定义弹性盒模型子元素如何分配“容器剩余空间”，是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性：
flex: 1： 则其计算值为 flex: 1 1 0%； // 子元素不定义flex相关属性时的默认值
flex: auto,：则其计算值为 flex: 1 1 auto；// flex-basis为auto，伸缩基准值为自身width值，如果没有定义width，则基准值为内容宽度
flex: none,：则其计算值为 flex: 0 0 auto；// 本子元素不参与容器剩余空间分配
flex-grow：
扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。在「flex」属性中该值如果被省略则默认为「1」。
flex-shrink：
收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。在收缩的时候收缩比率会以伸缩基准值加权在「flex」属性中该值如果被省略则默认为「1」。
flex-basis：
伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。在「flex」属性中该值如果被省略则默认为「0%」在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的width值，如果自身的宽度没有定义，则长度取决于内容。
- 使用flex-direction改变元素的排列顺序
#container{
display: flex;
border: solid 5px blule;
flex-direction: column; // 纵向排列（默认row）
width: 500px
height: 300px;
}
- 控制换行方式
子元素宽度超过容器时，默认会进行伸缩或扩张。可通过制定flex-wrap属性控制换行：
#container{
display: flex;
border: solid 5px blue;
flex-direction: row;
flex-wrap: wrap; // 换行
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
// 3个子元素宽度合计超过容器宽度，由于对容器设置了flex-wrap: wrap，因此会换行而不伸缩
width: 250px;
}
4. 弹性盒布局下，指定元素的水平和垂直对齐方式
当flex-grow属性值不为0时，各子元素在main axis轴方向上自动伸缩，所以justify-content无效。
下面假设弹性盒的布局方向按照默认的flex-direction: row，横向布局：
-
justify-content指定元素在水平方向（main axis）的对齐方式
justify-content属性值如下：
flex-start：从main-start开始布局所有子元素
flex-end：从main-end开始布局所有子元素
center：居中布局所有子元素
space-between：将剩余空间平均分配在子元素之间
space-around：子元素周围平均分配剩余空间下面是一个示例，在容器里指定justify-content：
#container{
display: flex;
border: 5px solid blue;
flex-direction: row;
width: 600px;
height: 30px;
justify-content: flex-end;
}
align-items指定子元素在垂直方向（cross axis）的对齐方式
align-items属性值如下：
flex-start：从cross-start开始布局所有子元素
flex-end：从cross-end开始布局所有子元素
center：居中布局所有子元素
baseline：
stretch：垂直方向上高度被调整为最大align-self指定某子元素的脱离出align-items的独立对齐方式
align-self属性值如下：
auto：继承父元素的align-items属性值
其他可指定属性值同align-items
下面是一个示例，在容器里指定justify-content：
#container{
display: flex;
border: 5px solid blue;
flex-direction: row;
width: 600px;
align-items: flex-start;
}
#div-a{
background-color: orange;
width: 100px;
font-size: 12px;
align-self: flex-end;
}
#div-b{
background-color: yellow;
width: 150px;
font-size: 24px;
}
#div-c{
background-color: limegreen;
width: 200px;
font-size: 36px;
}
弹性盒多行布局时（flex-wrap: wrap），可以使用align-content属性指定各行的对齐方式。该属性与align-items的区别在于：align-items指定子元素的对齐方式，而align-content指定行对齐方式。
