---

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指定行对齐方式。