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-directionflex-wrap两个子选项。调整这两个选项可以修改浏览器的铺设方式,可以从右往左铺设,可以换行铺设,可以不换行铺设,设置可以从右往左,从下往上铺设。更有甚者,flexbox可以通过选项order来调整子元素的铺设顺序,而不是只按照HTML元素的出现顺序来铺设。

flex-grow是一个特别有意思的选项,它相当于简化版的百分比排版,如果一行上面有两个子元素,且元素一的flex-grow为1,而元素二的flex-grow为2,那么元素1会获得1/(1+2)也就是三分之一的空间,元素2获得三分之二的空间。flex-shrink选项可以用来缩放单个子元素。flex-basis替代了之前的widthheight,用来指定子元素的大小。

flex-growflex-shrinkflex-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中所有子元素整体的上下对齐方式

其他