写在前面

flex布局，又称弹性布局，是目前使用最广泛的布局方式，除了ie浏览器外，大多数浏览器和其新版本都支持。

以下图片来源于 css-tricks

附上一个很好地练习和理解flex布局各种语句的小游戏：flexboxfroggy

另外 flex 布局本身有局限性，并不是所有浏览器都兼容的，关于 flex 的浏览器兼容性可查询 caniuse

flex 布局也存在一些问题，遇到问题时可查看 flex 的局限性与错误

flex属性很多，但真正用到的基本就是：

  1. /*container*/
  2. display: flex;
  3. flex-direction: row / column;
  4. flex-wrap: wrap;
  5. justify-content:center / space-between;
  6. align-items: center;
  8. /*items*/
  9. flex-grow


1. 让一个元素变成flex容器

display

flex布局采取容器(container)和项目(item)结合的方式进行布局，容器是父元素，项目是多个子元素，为父元素启用flex属性，就意味着要对该元素内的物体进行flex布局，以下便从容器(container)和项目(item)两个方面各自具有的属性进行介绍。

给父元素加一个class=”container”的class属性名，然后设置如下即可变成一个容器：

  1. .container{
  2.     display: flex /* or inline-flex */;
  3. }

flex和inline-flex的区别：

这两个属性值对其里面的项目子元素的布局没有任何影响，是对具有该容器属性的父元素类型的一个定义，flex是块级元素，inline-flex是内联块元素。对父元素同级的周围的元素有影响。

2. flex container

0.png

2.1 flex-direction

flex布局默认是元素一字排开，flex布局下的元素没有块级元素、内联元素之分，经测试，flex布局下容器里的所有元素的{display: block / inline; }属性都没有任何作用，div也不再默认独占一行，而是根据其内容定大小，span的width、height属性也都起作用，可自定义其大小。

主轴方向属性是flex-direction，是用来定义一字排开的元素的方向是横着还是竖着。

  1. .container {
  2.   flex-direction: row | row-reverse | column | column-reverse;
  3. }

1.png

2.2 flex-wrap

默认情况下，所有items都将尝试挤在一行，可在需要的时候设置折行

  1. .container{
  2.   flex-wrap: nowrap | wrap | wrap-reverse;
  3. }
  4. //nowrap是默认值，默认不折行

2.png

2.3 flex-flow

flex-direction和flex-wrap属性的简写，默认值是 row nowarp

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

2.4 justify-content

这个属性一般用于主轴方向加入了自动换行属性的容器，自动换行后该行可能会出现一些空隙，如何处理这些空隙，让元素在有空隙的情况下以何种方式分布，正是justify-content属性所处理的。

  1. .container {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around |   
  3.   space-evenly
  4. }

flex-start：默认值

space-between：每行元素在两边对齐，中间平分空隙

space-around：每行元素的左右两边均有同等大小的空隙，所以中间元素的两个空隙挨着时空隙要大些

space-evenly：空隙空间平均分，两边也有空隙

3.png

2.5 align-items

该属性用于主轴方向为横向，且容器的高度高于多行元素的总高度，即纵向方向有空隙时，如何对纵向方向的空隙进行划分的布局方式

  1. .container {
  2.   align-items: stretch | flex-start | flex-end | center | baseline | first baseline | 
  3.   last baseline;
  4. }

stretch(默认值)：当子元素没有自定义高度时，该属性值起作用，会将元素的高度拉伸，填满整个高度

4.png

2.6 align-content

和justify-content属性值类似，只不过该属性是针对行与行间的数据，是纵轴的。

  1. .container {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | 
  3.   space-evenly | stretch ;
  4. }

5.png

3. flex items

请注意，float, clear 和 vertical-align对弹性项目没有影响

6.png

3.1 order

items的顺序默认是按照代码的执行顺序，但是可以更改

  1. .item {
  2.   order: <integer>; /* default is 0 */
  3. }

7.png

3.2 flex-grow

该属性定义了items在必要时增长的能力，它接受作为比例的无单位值。它决定了项目应在伸缩容器内部占用多少可用空间。

如果所有项目的flex-grow都设置为1，则容器中的剩余空间将平均分配给所有子项。
如果其中一个孩子的值为2，则剩余空间将尝试占其他孩子的两倍。

  1. .item {
  2.   flex-grow: <number>; /* default 0 负数无效*/
  3. }

8.png

3.3 flex-shrink

该属性定义了弹性项目在必要时收缩的能力。

一般写flex-shrink: 0，防止变瘦

  1. .item {
  2.   flex-shrink: <number>; /* default 1 负数无效*/
  3. }

3.4 flex-basis

如果设置为0，则不考虑内容周围的多余空间。如果设置为auto，则多余的空间将根据其flex-grow值进行分配

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }

3.5 flex

上述三个属性值的缩写，空格隔开。

  1. .item {
  2.   flex: none | [flex-grow flex-shrink flex-basis]
  3. }

3.6 align-self

该属性允许为单个弹性项目覆盖默认对齐方式（或由align-items指定的对齐方式）

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }

9.png