Learn CSS Layout学习笔记(三)
Learn CSS Layout是一个在线的CSS排版教程,简明扼要。
用float来进行排版
float layout example这个例子用float进行排版:
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
先把导航栏设置为左浮动,然后把内容栏的左外边距设置成和导航栏一样的宽度。就得到了左边是导航栏,右边是内容栏的两栏板式。
用百分比进行排版
我们可以不用指定导航栏的绝对宽度,而是指定一个百分比,这样在可视区域变化时,导航栏的大小也会跟着变化:
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
和前面的例子相比,这个例子的改动是把导航栏的宽度从200px改成了20%。
根据可视区域的大小进行排版
上面的例子中,用百分比排版,可以给我们在浏览器可视区域变化的时候提供一定的灵活性。如果需要更大的灵活性,我们可以为不同可视区域大小显示应用不同的CSS设置,这需要用到CSS的media queries:
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
基于media queries的设计又可以称为responsive设计,亦是说页面的布局可以根据浏览器可视区域的大小进行调整。
使用inline-block进行布局
inline-block,也就是把块状元素按直列方式排布,可以符合某些场合的需要:
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
前面例子中使用浮动元素的多栏布局,也可以使用块状直列元素来实现:
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}
注意: 块状直列元素也受vertical-align属性的影响。
多栏板式
向文字这些直列的元素,也可以使用CSS的column族属性来进行多栏排布:
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
基于flexbox的排版
一开始我们提到,排版主要是浏览器自动进行的工作,我们通过一些选项来干预浏览器的行为,来达到我们希望的板式。在这之前我们介绍的排版方式中使用的各种选项,其实本来的目的不是为了用于排版,只不过把这些选项凑到一起,正好能够达到我们预期的目的。
CSS3 Flexbox提供了一组全新的选项,专门用于排版,让你能够对浏览器对HTML元素的铺设过程有更多的干预和指导。使用这个选项之前,需要把一个块级HTML元素的display属性设置为flex,这样HTML元素就变成了一个fexbox。fexbox之中的子元素的排版可以用flex选项进行控制:
.container {
display: flex; /* or inline-flex */
}
默认情况下,浏览器按照从左到右,从上到下的方式铺设HTML元素。但对于flexbox而言,这只是其中一个选项,表示如下:
flex-flow: row wrap
flex-flow
是一个复合选项,囊括了flex-direction
和flex-wrap
两个子选项。调整这两个选项可以修改浏览器的铺设方式,可以从右往左铺设,可以换行铺设,可以不换行铺设,设置可以从右往左,从下往上铺设。更有甚者,flexbox可以通过选项order
来调整子元素的铺设顺序,而不是只按照HTML元素的出现顺序来铺设。
flex-grow
是一个特别有意思的选项,它相当于简化版的百分比排版,如果一行上面有两个子元素,且元素一的flex-grow
为1,而元素二的flex-grow
为2,那么元素1会获得1/(1+2)也就是三分之一的空间,元素2获得三分之二的空间。flex-shrink
选项可以用来缩放单个子元素。flex-basis
替代了之前的width
和height
,用来指定子元素的大小。
flex-grow
、flex-shrink
和flex-basis
这三个选项可以用综合到flex
这个复合选项来进行设置:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
flexbox有多种方式可以帮助你对齐HTML元素:
- 通过设置
justify-content
,可以调整flexbox中子元素的左右对齐方式 - 设置
align-items
,可以调整flexbox中子元素的在一行之内的上下对齐方式 - 设置
align-self
,可以调整flexbox中某一个子元素在所在行的上下对齐方式 - 设置
align-content
,可以调整flexbox中所有子元素整体的上下对齐方式