Flex布局--必然的选择

这篇文章是我在阮一峰老师的flex布局教程下，按照自己的理解重写写一遍，以便增强理解。如果你来到这里最好去看一下阮一峰大神的Flex布局教程

正式开始自己的。

说起布局方式，大家首先要了解css3有哪些布局方式，这里就不一一详解了。网上一大堆，而且平时写css3的时候大家一般也都会用到。

Flex布局：

1.概念：flex布局，英文全称为：Flexible Box 也就是弹性盒子的意思。设置flex布局的元素叫做容器，其他的子元素叫做项目。恩，我之前还真不知道叫做项目，没注意过。在容器中存在着两根轴：主轴（水平）和交叉轴（垂直）。

然后我们先创建一个正常的li列表

<div>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
        <li>fifith</li>
    </ul>
</div>

在简单设置一下css样式，也不能太难看

  div{
      height: 500px;
      width: 500px;
      margin:0 auto;
      background-color: #333;
  }
  ul{
      padding: 20px;
      box-sizing: border-box;
  }
    div li{
        list-style: none;
        display: block;
        width: 200px;
        height:50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
　　　　　margin：10px;
    }
    li:nth-child(n){
        background-color: #007aff;
    }
    li:nth-child(2n){
        background-color: #8a6de9;
        color: #fff;
    }

最终展现在我们眼前的效果就是

 

这个留着备用，我们继续开始下面的流程。

2.作用在容器上面的6大属性

         flex-direction
         align-items
         justify-content
         align-content
         flex-wrap
         flex-flow

2.1首先看第一个flex-direction属性

在之前我们设置好得li列表上面我们做一下改动，给div增加新的样式，为了方便容易看，我就直接在之前的样式后面 继续为 div 下ul元素添加样式。

   div ul{
        display: flex;
    }

看一下效果

 

从原本的横向排列，变成了纵向排列。而且之前我们设置的 每个li 的宽度已经不起作用了。当我们设置display:flex;的时候，主轴默认的方向是水平方向也就是我们看到的样子。所以我们可以通过改变主轴的方向来随意调整我们li的排列方式。

        /*设置主轴方向为垂直方向*/
        flex-direction: column;
        /*设置主轴方向为垂直方向，从下往上*/
        flex-direction: column-reverse;
        /*设置主轴方向为水平方向，从左往右*/
        flex-direction: row;
        /*设置主轴方向为水平方向，从右往左*/
        flex-direction: row-reverse;
        flex-direction: inherit;

flex-direction有五个属性，也可以说四个，毕竟最后一个可以省去。我们只要记着两个就行，column代表着垂直方向，row代表着水平方向。

2.2、这里我们看一下flex-wrap属性。

上面我们看到，设置成flex布局之后，li的宽度发生了变化，而且没有换行，挤在了一起。给样式加上flex-wrap之后，看一下

    div ul{
        display: flex;
        flex-wrap: wrap;
    }

flex-wrap，默认是nowrap。不换行。所以就导致了我们之前的那种情况，现在我们设置成wrap，让他根据宽度来决定是否换行。这样一来，就和float一样了。而且更加方便。flex-wrap还有一个属性

 

    div ul{
        display: flex;
        flex-wrap: wrap-reverse;
    }

也就是颠倒个个。

2.3flex-flow也就是flex-direction和flex-wrap的结合体，没什么好说的啦！

2.4justify-content

    div ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

也就是设置垂直方向的排列方式，center就是居中。另外还有其他属性space-between;space-around;这两个属性可以说是我经常用到的属性。

2.4align-item这个就是水平方向的设置了。也justify-content相对应。也就不举栗子了。

2.5align-content属性定义的是多根线轴的对齐方式。具体样式也上面那两位几乎一样的。

3、在项目上的6大属性。

        order
        flex-grow
        flex-shrink
        flex-basis
        align-self

3.1、order，设置数值，数值越小越靠前。例如我们给最后一个li添加order属性。设置为-1，样式为

    li:last-child{
        order: -1;
    }

可以看到第五个fifth排到了第一位！！这就很方便了。也很实用，说实话，我刚刚发现这个属性的时候就想发现新大陆一样激动（鬼知道哥伦布怎么想的）

3.2、flex-grow属性。设置放大比例，默认值是0，例如我们给最后一个li增加属性

    li:last-child{
      flex-grow: 1;
    }

3.3、flex-shrink就是缩小比例了。这个就不多说了。

3.4、flex-basis属性则定义了在分配多余空间之前，项目占据的主轴空间。

3.5、flex属性就是结合体.....我不是很熟练。还是一个个写吧

3.6、align-self也就是一个特立独行的存在。改变自己的排列方式。