CSS3学习笔记——多栏布局、盒布局、弹性盒布局

使用float或position属性进行页面布局的缺点

两个块区域是各自独立的，如果在其中一个区域加入一些内容，将会使两个元素的底部不对齐，导致页面多出一块空白区域。

如下例所示，第一个DIV中有图像元素，篇幅比较大：

多栏布局

使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容底部对齐；

多栏布局的相关属性：

1）column-count：将一个元素中的内容分为多栏进行显示。

2）column-width：单独设置每一栏的宽度而不设定元素的宽度；（需要在元素外面单独设立一个容器元素，指定容器元素的宽度）

3）width：元素的宽度，即，多个栏目的总宽度；

4）column-gap：设定多栏之间的间隔距离；

5）column-rule：在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、颜色等；

扫描二维码关注公众号，回复： 3378020 查看本文章

以上的各个属性，在Firefox浏览器中要添加前缀 “-moz-”;

在Safair、chrome或Opera浏览器中需要添加前缀 “-webkit-”;

在IE浏览器中，不需要添加浏览器供应商前缀；

<style type="text/css">
div#container{
    width:42em;
}
div#div1{
    /* 栏数 */
    column-count: 2;
    -moz-column-count: 2;        
    -webkit-column-count: 2;
    /*每栏宽度  column-width需要有容器元素并设置宽度 */
    column-width:20em;
    -moz-column-width:20em;
    -webkit-column-width:20em;
    /* 栏与栏之间的距离 */
    column-gap:2em;
    -moz-column-gap:2em;
    -webkit-column-gap:2em;
    /* 栏的间隔线 */
    column-rule: 1px dashed blue;
    -moz-column-rule: 1px dashed blue;
    -webkit-column-rule: 1px dashed blue;
}
div#div3{
    width:100%;
    background-color:yellow;
    height:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
<img src="test.jpg">
<p>示例文字1。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
<p>示例文字2。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div3">
页面中其他内容
</div>
</div>

运行结果如下：

盒布局

同样可以解决页面布局时底面不对齐的问题；

通过box属性来使用盒布局，在Firefox浏览器中，需要书写成：“-moz-box”，在Safari、Chrome、Opera浏览器中需要书写成：“-webkit-box”；

<style type="text/css">
#container{
	display: box;
	display: -moz-box;
	display: -webkit-box;
}
#left-sidebar{
	width: 200px;
	padding: 20px;
	background-color: orange;
}
#contents{
	width: 300px;
	padding: 20px;
	background-color: yellow;
}
#right-sidebar{
	width: 200px;
	padding: 20px;
	background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
       box-sizing: border-box;
}
</style>

运行结果如下：

盒布局与多栏布局的区别：

① 使用多栏布局时，各个栏宽度必须是相等的，在指定每栏宽度时，只能为所有的栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的；

② 使用多栏布局，不可能具体指定什么栏中显示什么内容；

因此，多栏布局适合用于在显示文章内容的时候，不适合安排整个网页中各个元素组成的网页结构。

弹性盒布局

只要使用flex属性就可以使盒布局变为弹性布局了，即，元素的高度与宽度具有自适应性；

1）order：改变个元素的显示顺序，属性值为整数，浏览器的显示顺序根据这个序号从小到大排；

2）flex-direction：改变元素的排列方向

属性值有： row（横向） row-reverse（横向反向排列） column（纵向） column-reverse（纵向反向排序）

3）flex：使元素的高度和宽度自动扩大；填补容器中的空白部分；

使用盒布局的时候，元素的高度与宽度具有自适应；即，元素的高度与宽度根据排列方向的改变而改变；

当为横向时：宽度与元素中的内容相等，高度等于容器高度；

当为纵向时：高度为元素内容的高度，宽度为容器的宽度；

看如下代码的演示效果：

<style type="text/css">
#container{
	/* flex属性 变成弹性盒布局 */
    display: flex;
    border: solid 5px blue;
    /* 排列方向 */
    flex-direction:column;
    /* flex-direction:row; */
    width: 400px;
    height: 200px;
}
#text-a{
	/* 显示顺序 */
	order: 2;
	background-color: orange;
}
#text-b{
	order: 3;
	background-color: yellow;
}
#text-c{
	order: 1;
	background-color: limegreen;
}
#text-a, #text-b, #text-c{
	box-sizing: border-box;
	font-size: 1.5em;
	font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>

横向排列纵向排列

以上例子的盒布局中，元素的高度与宽度具有一定的适应性，但是容器中总是还会留出一大片空白的区域，如何消除这块空白区域？

利用flex属性，使得盒布局变成弹性的，使得参与排列的元素的总宽度和高度等于容器的总宽度与高度；

即在，容器的子元素的样式代码中加入flex属性；

#text-a{
	/* 显示顺序 */
	order: 2;
	flex: 1;
	background-color: orange;
}

运行结果如下：

4）对多个元素使用flex属性

flew属性实质上是对于空白区域的一个划分分配规则；

#container{
	/* flex属性 变成弹性盒布局 */
    display: flex;
    border: solid 5px blue;
    /* 排列方向 */
    flex-direction:column;
    /* flex-direction:row; */
    width: 400px;
    height: 200px;
}
#text-a{
	/* 显示顺序 */
	order: 2;
	flex: 1;
	background-color: orange;
}
#text-b{
	order: 3;
	background-color: yellow;
	flex: 1;
}
#text-c{
	order: 1;
	flex: 2;
	background-color: limegreen;
}
#text-a, #text-b, #text-c{
	box-sizing: border-box;
	font-size: 1.5em;
	font-weight: bold;
}

在以上样式代码中，a、b、c三个div中的flex值分别为1,1,2，其实就是相当于把空白部分分成4份，a、b各占1份，c占2份；

上面例子中，三个div元素的高度是由div元素内容决定的，我们也可以指定它们的高度或宽度；

5）指定元素的高度或宽度；

当元素的排列方向为横向：元素的总宽度小于容器的宽度，使用flex-grow属性；

元素的总宽度大于容器的宽度，使用flex-shrink属性；

当元素排列的方向为纵向：元素的总高度小于容器的高度，使用flex-grow属性；

元素的总高度小于容器的高度，使用flex-shrink属性；

① flex-grow：

以下面的例子来说明该属性的特性：

<style type="text/css">
#container{
    display: flex;
    border: solid 5px blue;
    flex-direction:row;
    width:600px;
    height: 300px;
}
#text-a, #text-b, #text-c{
    box-sizing: border-box;
    font-size: 1.5em;
    font-weight: bold;
    width:150px;
    flex-grow:1;
}
#text-a{
    background-color: orange;        
}
#text-b{
    background-color: yellow;
    flex-grow:3;
}  
#text-c{
    background-color: limegreen;
}
</style>

当使用flex-grow属性计算元素的宽度时，首先先计算出元素所占的总宽度：150*3=450px;剩余的空白宽度为150px;接着计算flex-grow属性值的总和为：1+1+3=5；所以增值单位为30px;所以第一和第三个div元素的宽度为150+30=180px；第二个div的宽度为150+90=240px；

② flex-shrink：

以下面的例子来说明该属性的特性：

#container{
    display: flex;
    border: solid 5px blue;
    flex-direction:row;
    width:600px;
    height: 300px;
}
#text-a, #text-b, #text-c{
    box-sizing: border-box;
    font-size: 1.5em;
    font-weight: bold;
    width:250px;
    flex-shrink:1;
}
#text-a{
    background-color: orange;        
}
#text-b{
    background-color: yellow;
    flex-shrink:3;
}  
#text-c{
    background-color: limegreen;
}

使用flex-shrink属性计算元素宽度时，计算过程如下：

① 250*3-600=150px;

② 150/5=30px；

③ 第一和第三个div元素的宽度为：250-30=220px；

④ 第三个div元素的宽度为：250-90=160px；

6）flex-basis：指定调整前的子元素宽度，该样式属性与width样式属性的作用完全相同；

7）控制换行方式

flex-wrap：指定单行布局或多行布局；

属性值如下：nowrap（不换行） wrap（换行） wrap-reverse：虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反。

8）指定水平方向与垂直方向的对其方式

① 弹性盒布局的专业术语介绍：

② justify-content属性

当flex-grow不为0时，容器被填满，此属性无效；

该属性功能：该属性有效时，对空白区域的布局方式；（针对的是所有的子元素）

#container{
    display: flex;
    border: solid 5px blue;
    flex-direction:row;
    width:300px;
    height: 30px;
    justify-content:flex-start;
/*     justify-content:flex-end;
    justify-content:center;
    justify-content:space-between;
    justify-content:space-around; */
}
#text-a{
    background-color: orange;     
    width:50px;   
}
#text-b{
    background-color: yellow;
    width:100px;
}  
#text-c{
    background-color: limegreen;
    width:50px;
}

设置为flex-start时设置为flex-end时

设置为center时

设置为space-between时设置为space-around时

③ align-items属性

定义：指所有子元素在cross axis轴方向上的对齐方式（横向布局时cross axis轴方向为垂直方向，纵向布局时cross axis轴方向为水平方向），具有多个属性值：

#container{
    display: flex;
    border: solid 5px blue;
    flex-direction:row;
    width:350px;
    align-items:flex-start;
/*     align-items:flex-end;
    align-items:center;
    align-items:baseline;
    align-items:stretch; */
}

当设置为flex-start时设置为flex-end时

设置为center

设置为baseline时设置为stretch时，同一行中所有的自元素都被调到最大

④ align-self属性

定义：被用于单独指定某些子元素的对齐方式；

属性值：auto：继承父元素的align-items属性值；

其他可指定属性值同align-items属性值的可指定属性值；

⑤ align-content属性

align-content属性用于指定行对齐方式，而align-items属性用于指定子元素的对齐方式。

#container{
    display: flex;
    border: solid 5px blue;
    flex-direction:row;
    flex-wrap:wrap;
    width:300px;
    height: 400px;
    align-content:flex-start;
    align-content:flex-end;
    align-content:center;
    align-content:space-between;
    align-content:space-around;
}

设置为flex-start时设置为flex-end时