CSS3 Flex布局 Flexbox的属性详解

原文：A Visual Guide to CSS3 Flexbox Properties

 

Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

很多的设计师和开发者发现Flex布局很容易使用，它定位元素简单因此很多复杂的布局能够用很少的代码实现，引领更简单的开发过程。Flex布局的算法是基于方向的，不同于基于水平或者垂直的block和inline布局，这种Flex布局可以被用在小的应用组件中，而CSS3 网格布局模型是新兴处理大规模的布局。

本文主要讲解flex的每个属性怎样栩栩如生的影响布局。

1、基本概念:

在开始描述Flexbox属性之前，我们先小小的介绍一下Flexbox模型，Flex布局由父容器称为Flex容器（flex-container）和它直接的子元素称为flex 项目（flex-item）构成，在下文中将它们简称为“容器”和“项目”。

全息投影首选上海幻库!

【点击进入】

有众多全息投影案例,现场安装调试 质量保证,全新视角!联系电话:[phone]

查 看

在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语，你可以阅读W3C的官方文档来了解他们的意思。

 

flex容器有两个参考的轴：水平的主轴（main axis）和交叉的轴（cross axis）。主轴的开始位置main start，主轴结束位置main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end；直接子元素“项目”沿主轴排列；单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 

Flexbox是2009年W3C提出的新布局方案，这里用的是2014年9月的最新标准，它的最新的浏览器支持情况

Chrome 29+Firefox 28+Internet Explorer 11+Opera 17+Safari 6.1+ (prefixed with -webkit-)Android 4.4+iOS 7.1+ (prefixed with -webkit-)

 

2、用法:

使用flex布局首先在HTML中的父元素上设置display属性：

 

?

1

2

3

4

.flex-container {

    display: -webkit-flex; /* Safari */

    display: flex;

}

或者你想让它像内联元素一样，可以这样写：

?

1

2

3

4

.flex-container {

  display: -webkit-inline-flex; /* Safari */

  display: inline-flex;

}

注意：这是唯一的要设置在父容器上的属性，所有的直接子元素会成为自动flex项目。

 

3、flexbox 容器的属性：

 

?

1

flex-direction:row(默认值) | row-reverse | column | column-reverse;

该属性指定了Flex的项目怎样在flex容器中排列，设置flex容器的主轴方向，它们(项目)两个主要的方向排列，就像一行一样水平排列或者像一列一样垂直排列。

 

values：

 

?

1

2

3

4

.flex-container {

  -webkit-flex-direction: row; /* Safari */

  flex-direction:         row;

}

row 方向表明flex项目在一行中从左到右堆放在容器中。

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-flex-direction: row-reverse; /* Safari */

  flex-direction:         row-reverse;

}

row-reverse 方向表明flex项目从右到左堆放。

 

 

?

1

2

3

4

.flex-container {

  -webkit-flex-direction: column; /* Safari */

  flex-direction:         column;

}

column 方向指明flex项目在一列中从顶部到底部堆放

全息投影首选上海幻库!

【点击进入】

有众多全息投影案例,现场安装调试 质量保证,全新视角!联系电话:[phone]

查 看

 

 

?

1

2

3

4

.flex-container {

  -webkit-flex-direction: column-reverse; /* Safari */

  flex-direction:         column-reverse;

}

column-reverse 方向指明flex项目在一列中从底到顶部堆放

全息投影首选上海幻库!

【点击进入】

有众多全息投影案例,现场安装调试 质量保证,全新视角!联系电话:[phone]

查 看

 

 

 

?

1

flex-wrap:nowrap(默认值) | wrap | wrap-reverse;

初始情况下，Flexbox的理念是所有的项目都排列在一条线上（轴线），flex-wrap 属性控制容器是否将它的项目排列在一行或者多行，并且控制新行堆叠的方向。

values：

?

1

2

3

4

.flex-container {

  -webkit-flex-wrap: nowrap; /* Safari */

  flex-wrap:         nowrap;

}

flex项目会排列在一条线上并且它们会缩放适应到容器的宽。

 

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-flex-wrap: wrap; /* Safari */

  flex-wrap:         wrap;

}

项目(flex items)会在多行展示，如果需要的话它们可以从左到右或者从上到下排列。

 

 

?

1

2

3

4

.flex-container {

  -webkit-flex-wrap: wrap-reverse; /* Safari */

  flex-wrap:         wrap-reverse;

}

 

 

?

1

flex-flow: <flex-direction> || <flex-wrap>;</flex-wrap></flex-direction>

该属性是上面两个属性的简写方式，前一个参数设置flex-direction，后一个参数设置flex-wrap;

 

values：

?

1

2

3

4

.flex-container {

  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */

  flex-flow:         <flex-direction> || <flex-wrap>;

}</flex-wrap></flex-direction></flex-wrap></flex-direction>

 

默认值： row nowarp

 

 

?

1

justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;

定义了项目在容器主轴上的对齐方式，当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

values：

?

1

2

3

4

.flex-container {

  -webkit-justify-content: flex-start; /* Safari */

          flex-start;

}

所有项目向容器的左边对齐

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-justify-content: flex-end; /* Safari */

  justify-content:         flex-end;

}

所有项目向容器的右边对齐

 

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-justify-content: center; /* Safari */

  justify-content:         center;

}

所有项目在容器中居中对齐

 

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-justify-content: space-between; /* Safari */

  justify-content:         space-between;

}

第一个和最后一个项目向容器的边界对齐，剩余的空间各个项目等分

 

 

?

1

2

3

4

.flex-container {

  -webkit-justify-content: space-around; /* Safari */

  justify-content:         space-around;

}

所有的项目等分剩余的容器空间，包括第一个和最后一个项目（所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍）。

 

 

 

?

1

align-items:flex-start | flex-end | center | baseline | stretch(默认值);

定义项目在交叉轴上的对齐方式，交叉轴与当前的轴线有关系，与justify-content很相似，只不过是垂直方向的；这属性为所有的项目设置默认的交叉轴上的对齐方式，包括匿名的。

values：

?

1

2

3

4

.flex-container {

  -webkit-align-items: stretch; /* Safari */

  align-items:         stretch;

}

项目会填充容器的整个高或者宽(fill the whole height )，从容器交叉轴的起点到交叉轴的结束点。

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-items: flex-start; /* Safari */

  align-items:         flex-start;

}

项目会堆放在容器交叉轴的起始位置（cross start ）。

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-items: flex-end; /* Safari */

  align-items:         flex-end;

}

项目会堆放在容器交叉轴的结束位置（cross end ）。

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-items: center; /* Safari */

  align-items:         center;

}

项目会堆放在容器交叉轴的居中位置（ center of the cross axis ）

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-items: baseline; /* Safari */

  align-items:         baseline;

}

所有项目的基线会对齐

基线？不知道基线是什么请戳这里-->基线是什么?

 

 

?

1

align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);

当交叉轴上还有多余的空间时它定了多行的对齐方式，类似justify-content在主轴上对齐所有项目的方式一样。

 

values：

?

1

2

3

4

.flex-container {

  -webkit-align-content: stretch; /* Safari */

  align-content:         stretch;

}

每一行的项目后面等比分配了交叉轴上的多余空间。

全息投影首选上海幻库!

【点击进入】

有众多全息投影案例,现场安装调试 质量保证,全新视角!联系电话:[phone]

查 看

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-content: flex-start; /* Safari */

  align-content:         flex-start;

}

项目在容器的交叉轴起始点上堆放在一起。

 

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-content: flex-end; /* Safari */

  align-content:         flex-end;

}

项目在容器的交叉轴结束点上堆放在一起。

 

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-content: center; /* Safari */

  align-content:         center;

}

项目的行被堆放在容器的交叉轴线中间。

 

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-content: space-between; /* Safari */

  align-content:         space-between;

}

与justify-content类似，项目的行距离在容器的交叉轴线上被等分，第一行和末尾的一行与容器的边缘对齐。

 

 

 

?

1

2

3

4

.flex-container {

  -webkit-align-content: space-around; /* Safari */

  align-content:         space-around;

}

与justify-content类似，项目的行等分了容器的交叉线上的剩余空间，第一行和最后一行同样也得到了一些，它们之间的间隔比首行和末行到容器边界的间隔大一倍。

注意：这个属性仅仅当容器中有多行的项目时有效，如果所有项目仅仅占一行，那这个属性对布局没有任何影响。

 

4、Flexbox 项目属性

 

?

1

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></integer></span>

order属性控制容器的直接子元素在容器中的顺序，默认在容器中这些项目是以该数字递增的方式排列的。

values:

?

1

2

3

4

5

values:

.flex-item {

  -webkit-order: <integer>; /* Safari */

  order:         <integer>;

}</integer></integer>

该属性可以很简单的控制项目的顺序，而不用在HTML代码里面做调整。这个整形值可以为负数，默认值是 0。

vcmRlcg==" src="/uploadfile/Collfiles/20150815/20150815082218170.jpg" width="735" />

 

 

 

?

1

<span style="font-size:14px;">flex-grow: <number></number></span>

该属性指定项目的生长因素，它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。
values:

 

 

?

1

2

3

4

.flex-item {

  -webkit-flex-grow: <number>; /* Safari */

  flex-grow:         <number>;

}</number></number>

 

当所有的项目的flex-grow值相等的时候它们的size相同。

第二个项目占用了更多的剩余空间。

默认值是：0
注意：负数在这个属性中是没有用的

 

 

 

?

1

flex-shrink: <number></number>

该属性指定了项目的收缩因素，它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

 

values:

 

?

1

2

3

4

.flex-item {

  -webkit-flex-shrink: <number>; /* Safari */

  flex-shrink:         <number>;

}</number></number>

 

默认情况下，所有的项目都会收缩，但是当我们设置该属性的值为0的时候，项目会保持原有的大小。


默认值是：1
注意：负数在这个属性中是没有用的

 

 

?

1

flex-basis：auto | <width></width>

该属性的值和width和height的取值一样，在 flex factors分配剩余空间之前指定项目的初始的大小。

 

values:

 

?

1

2

3

4

.flex-item {

  -webkit-flex-basis: auto | <width>; /* Safari */

  flex-basis:         auto | <width>;

}</width></width>

默认值：auto

 

 

 

 

?

1

flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]</flex-basis></flex-shrink></flex-grow>

该属性是flex-grow, flex-shrink 和flex-basis的缩写形式，同时属性值也有简写：auto表示(1,1,auto)，none表示(0,0,auto)

 

values:

 

?

1

2

3

4

.flex-item {

  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */

  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];

}</flex-basis></flex-shrink></flex-grow></flex-basis></flex-shrink></flex-grow>

注意： W3C鼓励使用flex的简写形式，因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

 

 

 

 

?

1

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

该属性和容器的align-items属性有同样的作用，它是用在单一的项目上的，可以完全压倒容器中align-items定义的对齐方式。
values:

 

 

?

1

2

3

4

.flex-item {

  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */

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

}

 

注意：auto 表示项目会使用父元素（容器）的align-items的值，如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align这些属性对于项目(flex item)会失效。