10分钟理解CSS3 FlexBox

基本介绍

特色

1. flexbox是一种css display类型，提供一种更简单高效的布局方式；
2. flexbox能够对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距；
3. flexbox对响应式有很好的支持；

工做原理

设置父元素的display属性为flex，则子元素都变成flex item，由此能够控制子元素的排列方式、尺寸、间距等；

兼容性

Flex Container

先来看一个最简单的flex示例，外层div设置display: flex成为一个flex container，内部的3个div则自动变为flex item：

html:

<div class="flex-container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

效果：

效果与浮动布局相似，可是若是用浮动实现的话须要写更多的代码，而flex一行就搞定了。

1. Justify Content

若是咱们想让flex item居中排列呢，咱们能够给flex container增长一个css属性：justify-content，它控制flex item在主轴方向（main axis，由flex-drection决定，默认为水平方向）上的对齐方式：

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

效果如图：

除此以外justify-content还能够设置为flex-start, flex-end, space-around, space-between, space-even等值，具体效果请自行实验。

2. Align Items

实现了flex方向的居中后，垂直于主轴方向（cross axis）的居中能够用align-items实现。

css：

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  justify-content: center;
  height: 200px;
  background-color: white;
  align-items: center;
}

效果：

使用flex解决了以往css垂直居中实现复杂的问题！相应的，align-items还有flex-start, flex-end等其余值。

3. Flex Direction

flex-direction决定了主轴方向即flex item排列方向，除了默认的row方向以外，还能够纵向、反向（row-reverse/column-reverse）排列flex item：

css：

.flex-container{
  ...
  
  flex-direction: column;
  align-items: center;
}

效果：

4. Flex Wrap

若是咱们不想在窗口变窄的状况下压缩flex item，而是让超出边界的flex item换行显示那咱们能够设置flex container的flex-wrap：

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.box{
  height: 100px;
  min-width: 300px;
  flex-grow: 1;
}

当咱们压缩窗口的时候，效果以下：

flex wrap还有一个值：wrap-reverse，设置该值后，被wrap的元素会排到其余元素上面：

因而可知，flex wrap必定程度上能够取代media query了。

5. Flex Row

最后，flex-direction和flex-wrap能够合并为一个属性flex-flow，好比：flex-flow: row-reverse wrap。

Flex Item

1. Flex Grow

在上面全部的例子中，三个flex item只占据了flex container小部分空间，若是想让flex item占满flex container咱们须要给flex item设置flex-grow属性。顾名思义，grow意味着增加，用于控制flex item的尺寸的伸展。

将css修改成:

.box { 
    height: 100px; 
    min-width: 100px; 
    flex-grow:1; 
}

效果：

能够看到三个子元素平分了父元素的空间，由于此时它们的flex-grow都是1。若是只有一个子元素设置了flex-grow呢？

css：

.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; }

效果：

此时two和three的大小不变，而one占据了父元素剩余空间。

若是将one的flex-grow改成2，而two和three改成1，咱们看看会发生什么：

css:

.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; }

效果：

能够看到one的宽度变成了two和three的两倍，所以flex item的尺寸和flex-grow的值成正比。

2. Flex Shrink

与flex-grow相对的是flex-shrink， flex-shrink用于控制子元素尺寸超过flex container后，对子元素的压缩。请看示例：

修改box的宽度为flex container的1/3，one、two、three的flex-shrink分别为1，2，3：

.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; }

当窗口正常尺寸时，效果以下：

当咱们压缩窗口使其变得更窄后，效果以下：

当flex container宽度变为540px后，子元素都被不一样程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px，因此相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px，70 : 140 : 210 = 1 : 2 : 3，与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系，只不过当初始尺寸同样时它带来的影响被忽略了。

假设flex shrink为fs，flex item的初始尺寸为is，flex item被压缩的尺寸为ss，则正确的表达式为：

fs ∝ is/ss

3. Flex Basis

flex-basis用于设置flex item的初始宽/高。为何有width和height还须要从新加一个flex-basis呢？flex-basis和width/height有以下的区别：

1. flex-basis只能用于flex-item，而width/height能够应用于其余类型的元素；
2. flex-basis和flex-direction有关，当flex-direction为row的时，flex-basis设置的是宽度，当flex-direction为column时，flex-basis设置的是高度；
3. 当flex item被绝对定位后（absolute position），flex-basis不起做用，而width/height能够；
4. flex-basis能够用于flex的简写形式，如：flex: 1 0 200px;

咱们来看一下flex-basis的做用，将css修改以下：

.box{
  height: 100px;
  flex-grow: 1;
}
.one{
  background: pink;
  flex-basis: 100px;
}
.two{
  background: lightgreen;
  flex-basis: 200px;
}
.three{
  background: skyblue;
  flex-basis: 300px;
}

3个flex item都在原来的初始宽度基础上增长了相同的宽度：

固然，这个例子若是换成使用width也是同样的效果，可是虽然效果同样但意义不同，因此使用flex布局时仍是应该尽可能遵照规范，选合适的人去干正确的事。

4. Order

经过order属性咱们能够改变flex item的排列顺序，例如：

html:

<section id="blocks">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</section>

css：

#blocks{
  display: flex;
  margin: 10px;
  justify-content: space-between;
}

#blocks div{
  flex: 0 0 100px;
  padding: 40px 0;
  text-align: center;
  background: #ccc;
}

默认排列顺序是按照flex item在html中的出现顺序：

当咱们修改flex item的order值后，flex item会按照order值升序排列：

css：

.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; }

效果：

结语

flex就先简单介绍到这里，flex很强大也很简单，但愿你们用的开心。