CSS3弹性布局

CSS3弹性布局

弹性布局（flexible box）模块旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间的能力。

最重要的是弹性盒子布局与方向无关，相对于常规的布局，很显然，这些工作以及网页设计缺乏灵活性，无法支持大型和复杂的应用程序（特别当它涉及到改变方向，缩放、拉伸和收缩等）。

一、弹性盒布局中的术语

1).弹性容器:弹性容器也就是所有弹性元素的父容器。

2).弹性子元素:弹性容器的所有子元素都是弹性子元素。

3).轴:弹性盒布局中分主轴和侧轴。主轴是布局布局的方向,侧轴垂直于主轴。

4).方向: 弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束 边缘代表了弹性子元素排列的起始和结束位置。同时可以改变属性值来改变显示位置。

二、弹性盒布局中的属性

1、display: flex | inline-flex; (适用于父类容器元素上)

定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器

(1)、box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）

(2)、inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）

(3)、flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）

(4)、inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）

(5)、flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）

(6)、inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）

2、flex-grow (适用于弹性盒模型容器子元素)

设置或检索弹性盒的扩展比率。（根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。）

定义

flex-grow: <number>

值说明

<number>：用数值来定义扩展比率。不允许负值

flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow，可以看到总共将剩余空间分成了4份，其中b占1份，c占3分，即1:3

3、flex-shrink (适用于弹性盒模型容器子元素)

设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）

定义

flex-shrink: <number>

说明

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

4、flex-basis(适用于弹性盒模型容器子元素)

设置或检索弹性盒伸缩基准值。

定义

flex-basis: <length> | auto | <percentage>

值的说明

auto：无特定宽度值，取决于其它属性值

<length>：用长度值来定义宽度。不允许负值

<percentage>：用百分比来定义宽度。不允许负值

5、flex (适用于弹性盒模型子元素)

复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

如果缩写flex:1, 则其计算值为：1 1 0

定义

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

值的说明

none：none关键字的计算值为: 0 0 auto

[ flex-grow ]：定义弹性盒子元素的扩展比率。

[ flex-shrink ]：定义弹性盒子元素的收缩比率。

[ flex-basis ]：定义弹性盒子元素的默认基准值。

6、flex-direction (适用于父类容器的元素上)

设置或检索伸缩盒对象的子元素在父容器中的位置。

定义

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

值说明

row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

备注

flex生效需定义其父元素display为flex

7、flex-wrap (适用于父类容器上)

设置或检索伸缩盒对象的子元素超出父容器时是否换行。

定义

flex-wrap: nowrap | wrap | wrap-reverse

值说明

nowrap：当子元素溢出父容器时不换行。

wrap：当子元素溢出父容器时自动换行。

wrap-reverse：反转 wrap 排列。

8、flex-flow (适用于父类容器上)

复合属性。设置或检索伸缩盒对象的子元素排列方式。

定义

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

值说明

[ flex-direction ]：定义弹性盒子元素的排列方向。

[ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。

9、align-content (适用于父类容器上)

设置或检索弹性盒堆叠伸缩行的对齐方式。

定义

align-content: flex-start | flex-end | center | space-between | space-around | stretch

值说明

(1)、flex-start：各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

(2)、flex-end：各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

(3)、center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）

(4)、space-between：各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

(5)、space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

(6)、stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

10、align-items (适用于父类容器上)

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

定义

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

值说明

(1)、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

(2)、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

(3)、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

(4)、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

(5)、stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

11、align-self (适用于弹性盒模型子元素)

设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。

定义

align-self: auto | flex-start | flex-end | center | baseline | stretch

值说明

(1)、auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

(2)、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

(3)、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

(4)、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

(5)、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

(6)、stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

12、justify-content (适用于父类容器上)

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

定义

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

值说明

(1)、flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

(2)、flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

(3)、center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

(4)、space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

(5)、space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

13、order (适用于弹性盒模型容器子元素)

定义

order: <integer>

值说明

<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

三、CSS3弹性布局实例

1、居中对齐

.flex-container {...}{
  /**//* We first create a flex layout context */
  display: flex;

  /**//* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /**//* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

		

实例说明

通过设置父类容器的css代码控制子元素的排列方式（flex-direction:row）从左到右（默认方式）。子元素超出内容时是否换行。flex-wrap:wrap（采用换行的方式）。合起来就是flex-flow:row wrap。

设置子元素的弹性盒堆叠伸缩行的对齐方式为在盒子中平局分布 justify-content:space-around

2、自适应导航

/**//* Large */
.navigation {...}{
  display: flex;
  flex-flow: row wrap;
  /**//* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/**//* Medium screens */
@media all and (max-width: 800px) {...}{
  .navigation {
    /**//* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/**//* Small screens */
@media all and (max-width: 500px) {...}{
  .navigation {
    /**//* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

实例说明

(1)、设置子元素为从左到右（flex-direction:row），内容超出换行（flex-wrap:wrap）.

(2)、设置子元素的内容向右对齐（justify-content:flex-end）

(3)、当小于800px时，内容为居中，当小于500px时，内容纵向排列，从上到下。

3、3栏移动优先布局

.wrapper ...{
  display: flex;
  flex-flow: row wrap;
}

/**//* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer ...{
  flex: 1 100%;
}

/**//* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/**//* Medium screens */
@media all and (min-width: 600px) ...{
  /**//* We tell both sidebars to share a row */
  .aside ...{ flex: 1 auto; }
}

/**//* Large screens */
@media all and (min-width: 800px) ...{
  /**//* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main ...{ flex: 2 0px; }

  .aside-1 ...{ order: 1; }
  .main    ...{ order: 2; }
  .aside-2 ...{ order: 3; }
  .footer  ...{ order: 4; }
}

		

实例说明

(1)、设置子元素从左到右，超出换行（flex-flow:row wrap;）。

(2)、默认情况下所有子元素拓展比例为1（flex-grow:1），伸缩比例为100%（flex-basis:100%）。

(3)、大于800px时，.main的拓展比例为2.伸缩值为0（flex-basis:0px）,并且侧栏aside-1排列在第一位，main在第二位，aside-2在第三位。

(4)、大于600时。.aside元素的拓展比例为1（flex-grow:1），伸缩比例为auto（flex-basis:auto）。