开始学习之前，我感觉应该看一下比较实际的一个例子，用最少的代码，制作出一个响应式布局。
点击这里查看实例。
点击这里查看代码。
记得再回到顶部从头开始学习哦。

 
Flexbox 由 flex containers（容器） 和 flex items（项目）组成。
一个容器的display属性，只要设置为flex或者inline-flex，它就会变成一个flex容器。
一个flex容器里，可以有N个flex项目。
其中，flex项目是沿着一个flex line（基线）排列的，默认情况下，一个flex容器里只有一个基线。
在之后的例子中，我们用三个flex项目举例，这些项目默认是沿着水平方向的基线，从左至右排列的。
另外，flex容器外面，flex项目里面的代码，随便写，没有特殊要求。
 

支持的浏览器：
属性
基本支持
(单个基线 flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
多基线 flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1
属性介绍：
属性 描述
display 指定盒子模型的类型。
flex-direction 弹性伸缩方向
justify-content 当主轴（通常是水平方向的轴）上的空间不能全部使用的时候将元素进行水平方向排列。
align-items 当十字轴（通常是垂直方向的轴）上的空间不能全部使用的时候将元素进行垂直方向排列。
flex-wrap 当空间不能满足弹性伸缩的需求时，指定元素是否要进行换行。
align-content 修改flex-wrap属性的行为。此属性很像align-items，区别在于align-content排列的是轴线。
flex-flow flex-direction和flex-wrap的缩写属性。
order 相对同一个容器同一级的其它元素进行排序。默认order是0。数越高越往后排。
align-self 排列自己。可覆盖align-items属性。
flex 指定flex元素的长度。值为相对同容器其它元素的值。初始值为1。

举例说明：

*在之后的例子中，背景网格，每个单元格的尺寸可以看成是10px X 10px。

创建默认的flexbox组合











  
flex 项目 1

  
flex 项目 2

  
flex 项目 3

查看实例，打开页面后右键查看源代码

flexbox 默认排列方式
flexbox 默认排列方式

也可以将direction属性值变成rtl。这样，flex line的方向变成从右至左。所有的文本也都会从右至左排列。如下：

body {
    direction: rtl;
}

查看实例，打开页面后右键查看源代码

direction:rtl时的排列方式
direction:rtl时的排列方式

 

Flex Direction

flex-direction属性指定flex项目的排列方向。默认是flex-direction:row;即从左至右，从上到下。*row（行）
它的值还可以有：

  1. row-reverse 如说书写方向direction是ltr（左至右），那么该值会将项目从右至左排列。*reverse（反向）
  2. column 如果书写方向是左至右，那么该值会将项目从上到下排列。*column（列）
  3. column-reverse 道理同上，只是反向，从下至上排列。

 
例如 row-reverse：

.flex-container {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

查看实例，打开页面后邮件查看源代码

flex-direction: row-reverse
flex-direction: row-reverse

例如 column：

.flex-container {
    -webkit-flex-direction: column;
    flex-direction: column;
}

查看实例，打开页面后邮件查看源代码

flex-direction: column;
flex-direction: column;

例如 column-reverse：

.flex-container {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

查看实例，打开页面后邮件查看源代码

flex-direction: column-reverse;
flex-direction: column-reverse;

justify-content

justify-content 指定的是，当基线是横向的时候，flex项目不能完全充满水平方向的空间时，做出相应行为。
有效值有：

  • flex-start 默认值。项目从容器的开头处开始排列。
  • flex-end 项目从容器的尾部开始排列。
  • center 项目基于其容器居中排列。
  • space-between 项目之间留相同的间距。两端对齐。
  • space-around 项目的前面，中间，后面均留相同的空间，两端对齐。

 
flex-start 既是默认值。
以flex-end为例：

.flex-container {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

查看实例，打开页面后邮件查看源代码

justify-content: flex-end;
justify-content: flex-end;

以center为例：

.flex-container {
    -webkit-justify-content: center;
    justify-content: center;
}

查看实例，打开页面后邮件查看源代码

justify-content: center;
justify-content: center;

以space-between为例：

.flex-container {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

查看实例，打开页面后邮件查看源代码

justify-content: space-between;
justify-content: space-between;

以space-around为例：

.flex-container {
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

查看实例，打开页面后邮件查看源代码

justify-content: space-around;
justify-content: space-around;

align-items

align-items属性指定，flex项目不能完全充满垂直方向的空间时，做出相应行为。
有效值有：

  • stretch 默认值。项目会填充整个垂直空间。
  • flex-start 相对起点定位，并占用够用的空间。
  • flex-end 相对末尾定位，并占用够用的空间。
  • center 垂直居中。
  • baseline 相对基线对齐。

 
stretch

.flex-container {
    -webkit-align-items: stretch;
    align-items: stretch;
}

查看实例，打开页面后邮件查看源代码

align-items: stretch;
align-items: stretch;

flex-start

.flex-container {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

查看实例，打开页面后邮件查看源代码

align-items: flex-start;
align-items: flex-start;

flex-end

.flex-container {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

查看实例，打开页面后邮件查看源代码

align-items: flex-end;
align-items: flex-end;

center

.flex-container {
    -webkit-align-items: center;
    align-items: center;
}

查看实例，打开页面后邮件查看源代码

align-items: center;
align-items: center;

baseline

.flex-container {
    -webkit-align-items: baseline;
    align-items: baseline;
}

查看实例，打开页面后邮件查看源代码

align-items: baseline;
align-items: baseline;

flex-wrap

flex-wrap属性定义项目不能在一根基线上排列的时候是否要换行显示。
有效值有：

  • nowrap 默认值。不换行。
  • wrap 有必要时换行。
  • wrap-reverse 有必要时倒序换行。

 
nowrap

.flex-container {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

查看实例，打开页面后邮件查看源代码

flex-wrap: nowrap;
flex-wrap: nowrap;

wrap

.flex-container {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

查看实例，打开页面后邮件查看源代码

flex-wrap: wrap;
flex-wrap: wrap;

wrap-reverse

.flex-container {
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

查看实例，打开页面后邮件查看源代码

flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;

align-content

align-content属性补充flex-wrap属性。很像align-items，但它对齐的不是flex项目，而是基线。
有效值有：

  • stretch 默认值。基线占用剩余空间居中排列。
  • flex-start 相对其实位置依次排列
  • flex-end 相对末尾位置依次向前排列
  • center 居中排列
  • space-between 基线之间留相同空前
  • space-around 基线均匀地分布在flex容器中，两端有半个大小的空间

 
以center举例，其余的可以在这个例子的基础上，通过浏览器的审查元素自行修改查看，这里就不多举例了。

.flex-container {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

查看实例，打开页面后邮件查看源代码

align-content: center;
align-content: center;

flex-flow

flex-direction和flex-wrap的组合缩写属性。具体效果可以参见本页最底部的响应式布局的例子。
 

注：以下是Flex项目相关属性

order

order属性指定某个flex项目相对于其他项目的位置。默认每个项目的order都是0。
下面的例子，我们给第二个项目指定一个.first的样式。order:-1;那么它会排在最前面。

.first {
    -webkit-order: -1;
    order: -1;
}

查看实例，打开页面后邮件查看源代码

order: -1;
order: -1;

margin

margin属性可以给某个flex项目更多的边距，而其它项目会被推到其它的位置。

.flex-item:first-child {
    margin-right: auto;
}

查看实例，打开页面后邮件查看源代码

margin-right: auto;
margin-right: auto;

完美居中

下面的例子可以解决我们经常遇到的一个小难题，水平垂直居中。
对flex项目设置 margin: auto; 声明就可以了。

.flex-item {
    margin: auto;
}

查看实例，打开页面后邮件查看源代码

margin: auto;
margin: auto;

align-self

align-self属性将覆盖flex容器的align-items属性。它的有效值跟align-items属性的有效值一样。

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    alig

查看实例，打开页面后邮件查看源代码

align-self 设置各种值
align-self 设置各种值

 

flex

flex属性指定flex项目的长度，相对于其他同容器的项目。
下面的例子中，第一个项目将占用2/4的空间，其它的两个项目各占1/4的空间。

.flex-item {
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

查看实例，打开页面后邮件查看源代码

flex
flex

 

下面的例子展示了如何使用flexbox制作响应式布局。











  
Header

  

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.

  

  
  
  
Footer

查看实例，打开页面后邮件查看源代码

flexbox 响应式布局
flexbox 响应式布局

flexbox能给我们带来很多便利性。
但是由于这种布局方法对于浏览器的版本要求较高，所以搭建高兼容性的网站时请慎用。
如果你是个时代先驱者，那么就大胆使用吧。什么这那的。