布局相关的样式的简单总结

本人这几天刚刚接触到这几种布局方式，现总结如下，总结有所欠缺，以后等我熟练掌握之后，会再一次修改增加此篇文章的内容。

1、多栏布局

多栏布局一般应用在创建多个列来对文本进行布局，一般都是对一篇文章进行多列，类似报纸那样。

（1）创建多个列

将div中的元素分成3列，column-count IE9及以下不兼容，IE10和欧朋支持，火狐，谷歌，Safari要加前缀。

div{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
}

（2）设置分栏之间的宽度

column-gap 属性规定列之间的间隔：
设置div中元素分栏的宽度问50px

div{
    -moz-column-gap:50px;       /* Firefox */
    -webkit-column-gap:50px;    /* Safari 和 Chrome */
    column-gap:50px;
}

（3）定义分栏间隙

column-rule属性设置间隙的宽度，样式和颜色

div{
     -moz-column-rule:30px solid #ff0000;   /* Firefox */
     -webkit-column-rule:3px solid #ff0000; /* Safari and Chrome */
     column-rule:30px solid #ff0000;
}

该属性可以分成如下3个属性
column-rule-width:
column-rule-style:
column-rule-color:

（4）怎样跨栏

column-span:2 跨两栏
例：div元素下的h2标题跨所有栏

div h2{
    column-span:all;/*该属性目前只有谷歌和欧朋支持*/
}

---

2、盒模型布局

css3盒布局可以弥补使用float属性和position属性时多栏底部不能对齐的缺点。
例，假设将一个div用float属性分成水平方向的3部分，如果这3个部分都不设置高度，那么势必会被里面的内容撑起来，高度就会不一样。但是运用和模型就可以轻松的解决这个问题。

.wrap{
    display: -moz-box;/*css3盒布局*/
    display: -webkit-box;/*css3盒布局*/
    width: 700px;
    margin: 0 auto;
}
.div1{
    width: 200px;
    background: red;
}
.div2{
    width: 250px;
    background: green;
}
.div3{
    width: 250px;
    background: orange;
}
div{
    box-sizing:border-box;
}

效果图如下

---

3、弹性盒模型

 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

常用属性

　　1>　display:flex;
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

.wrap{
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
}

弹性容器内包含了一个或多个弹性子元素。

　　2>flex-direction顺序指定了弹性子元素在父容器中的位置
　　语法

flex-direction: row | row-reverse | column | column-reverse

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

．　３>justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
语法：

justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
• flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
• center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
• space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
• space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

. 　 4>align-items 属性
　　　align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
　　　语法：

align-items: flex-start | flex-end | center | baseline | stretch

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

.　5>flex-wrap 属性
　　　flex-wrap 属性用于指定弹性盒子的子元素换行方式。
　　　语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse -反转 wrap 排列。

参考自 w3cshool 和

http://www.runoob.com/css3/css3-flexbox.html 菜鸟教程