详解CSS3弹性盒模型

摘要

弹性盒模型是CSS3规范中提出的一种新的布局方式。弹性盒模型的目的是提供一种更加高效、简洁的方式来对容器中的元素进行布局、对齐和分配富余空间,即使它们的大小是未知或者动态变化的。利用弹性盒模型的新特性可以让我们告别元素浮动、定位,完美实现元素的垂直水平居中。由于弹性盒模型是在2009年提出的,目前它已经得到了所有标准浏览器的支持,所以我们可以尝试一下这种新的布局方式。

弹性盒模型CSS3规范中提出的一种新的布局方式。弹性盒模型的目的是提供一种更加高效、简洁的方式来对容器中的元素进行布局、对齐和分配富余空间,即使它们的大小是未知或者动态变化的。利用弹性盒模型的新特性可以让我们告别元素浮动、定位,完美实现元素的垂直水平居中。由于弹性盒模型是在2009年提出的,目前它已经得到了所有标准浏览器的支持,所以我们可以尝试一下这种新的布局方式。

下面,笔者将详细解读一下弹性盒模型(此处指新版弹性盒模型——display: flex;)。

值得我们注意的是:Flexbox是布局模块,而不是一个简单的属性,它包含了父元素属性和子元素属性。

任何一个容器都可以指定为如下的Flex布局,它其实是对display的一种扩展。同block和inline-block一样,弹性盒模型也分为两种,即:flex和inline-flex。

  1. E {
  2.     dispaly: flex | inline-flex;
  3. }

注意:容器设置成Flex布局以后,子元素的float、clear和vertical-align属性将失效,position属性依然有效。

我们将设置成flex属性的元素称为容器,它的子元素称为项目。当一个元素被转成弹性盒模型后,它便有了主轴和交叉轴。

flex-direction

主轴的方向(即项目的排列方向)

  1. E {
  2.     flex-direction: row;
  3. }

row(默认值):水平方向,起点在左端。

row-reverse:水平方向,起点在右端。

column:垂直方向,起点在顶端。

column-reverse:垂直方向,起点在底端。

flex-wrap

项目是否都在一个主轴上

  1. E {
  2.     flex-wrap: nowrap;
  3. }

nowrap(默认值):不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。

flex-flow

flex-direction属性和flex-wrap属性的简写形式

  1. E {
  2.     flex-flow: row nowrap;
  3. }

注:默认值为row nowrap,其它取值同flex-direction和flex-wrap。

justify-content

项目在主轴上的对齐方式

  1. E {
  2.     justify-content: flex-start;
  3. }

flex-start(默认值):左对齐,富余空间位于所有元素右侧。

flex-end:右对齐,富余空间位于所有元素左侧。

center:居中,富余空间位于所有元素两侧。

space-between:两端对齐,项目之间的间隔都相等,富余空间位于除两端元素之外每个元素的两侧。

space-around:等分对齐,富余空间平均分配并位于每个元素的两侧。

align-items

项目在交叉轴上如何对齐

  1. E {
  2.     align-items: stretch;
  3. }

stretch(默认值):如果项目未设置高度或设为auto,则占满整个容器的高度。

flex-start:交叉轴的起点对齐,富余空间位于交叉轴的终点那侧。

flex-end:交叉轴的终点对齐,富余空间位于交叉轴的起点那侧。

center:交叉轴的中点对齐,富余空间位于交叉轴的两侧。

baseline:项目第一行文字的基线对齐,富余空间位于交叉轴的两侧或一侧。

align-content

多根轴线的对齐方式

  1. E {
  2.     align-content: stretch;
  3. }

stretch(默认值):轴线占满整个交叉轴。

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center:与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间距相等。

注:如果项目只有一根轴线,该属性不起作用。

order

项目的排列顺序

  1. E F {
  2.     order: 0;
  3. }

注:默认值是0,取值为整数,数值越小,排列越靠前。

flex-grow

项目的扩展比例

  1. E F {
  2.     flex-grow: 0;
  3. }

注:默认值是0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。计算公式为:原来width + 剩余空间 * (项目flex-grow值 / 项目flex-grow值总和)

flex-shrink

项目的缩小比例

  1. E F {
  2.     flex-shrink: 1;
  3. }

注:默认值是1,即如果空间不足,该项目将缩小。如果所有项目都没有显示定义该属性,当空间不足时,都将等比例缩小。如果不想让某项,在空间不足时缩小,可将flex-shrink设置为0。

flex-basis

分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间

  1. E F {
  2.     flex-basis: auto;
  3. }

注:默认值是auto,宽度设置为auto时,盒子的宽度取决元素设置的宽度。

flex

flex-grow属性、flex-shrink属性和flex-basis的简写

  1. E F {
  2.     flex: 0 1 auto;
  3. }

注:默认值为0 1 auto,后两个属性可选。该属性有两个快捷值:auto等价(1 1 auto)和none等价(0 0 auto)。

align-self

单个项目的对齐方式,可覆盖align-items属性

  1. E F {
  2.     align-self: auto;
  3. }

auto(默认值):元素继承父容器的align-items属性,如果没有父容器则为stretch。

stretch:如果项目未设置高度或设为auto,则占满整个容器的高度。

flex-start:交叉轴的起点对齐,富余空间位于交叉轴的终点那侧。

flex-end:交叉轴的终点对齐,富余空间位于交叉轴的起点那侧。

center:交叉轴的中点对齐,富余空间位于交叉轴的两侧。

baseline:项目第一行文字的基线对齐,富余空间位于交叉轴的两侧或一侧。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: