flex布局学习

Flex布局学习笔记

主要学习资料阮一峰老师的blog

个人对于flex布局的理解：通过对某个容器中横纵两条轴上元素的分布的变化，实现的布局。也可以设置容器内元素的具体属性实现针对于某个元素的调整。

基础的属性还是要在使用中才能掌握，而且阮一峰老师对于flex的基本属性解释的非常详细，我就不再列举了。下面是针对于一些实例进行的代码的分析。

tips:

1. 以下所有实例都借鉴于阮老师的博客
2. 以下所有的图中若无特殊声明，浅灰色的为外层容器，class为container，深灰色的内层项目，class为item

单项目

1. 没有设置任何属性时的情况：

   

   只设置外层容器container的display：flex就可以达成以上效果。

       .container {
              display: flex;
          }

2. 项目水平居中

   

   在flex布局中，最重要的莫过于那两条互相垂直的轴了，主轴是默认是水平的，所以想要将某个元素水平居中，只需要将主轴上的布局修改为居中的布局就可以了。

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

3. 项目向右对齐

   默认的对齐方式是向左的，所以想要实现向右对齐，也只需要改变容器主轴的布局方式为向左对齐即可。其实在flex中为了使得轴的方向改变之后语义仍然没有问题，这里应该改为向主轴的末端对齐。

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

4. 垂直居中

   

   前面我们都是一直在一个轴上的操作，想要实现垂直居中就要使用另一个和主轴垂直的交叉轴了。交叉轴上的操作和主轴上的操作是类似的，只需要改变布局方式就可以了。不同的只是属性罢了。

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

5. 水平垂直居中

   

   水平垂直居中的话只需要把两个轴的布局都设置为居中就可以了。

          .container {
              display: flex;
              align-items: center;
              justify-content: center;
          }

两个轴的操作基本上就是这样子的，对于一个项目的的布局，仅仅使用这两个轴的布局已经绰绰有余。

双项目

1. 两个项目分居两边

   

   其实这样的布局，也是轴的基本布局的一种，可以通俗的理解为将容器中的项目在轴的方向上两端对齐，项目之间的间隔是相等的。

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

2. 竖直方向上的两端对齐

   

   一眼就能看出来，这个不就是上一个倒了一下么，所以我们只需要把轴转一下就可以实现这个效果了。

          .container {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
          }

3. 两端对齐加居中

   

   这个跟上一个也没有多大的变化，只不过水平居中了一下。那么是不是只需要改一下主轴的布局就可以了。这里就需要注意一下了，由于我们之前已经将主轴的方向修改过了，所以主轴现在竖直的，因此修改主轴是不行的。这时另一个轴的方向，也会随着主轴方向的改变而改变，毕竟名叫交叉轴嘛。所以我们只需要在上一个的基础上，修改交叉轴的布局为居中就可以了。

          .container {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
          }

4. 两个项目位于对角线上

   

   想要实现这样的布局，只靠两个轴的布局显然是不同的，因为两个项目的布局方式是不一样的，第一个是默认的布局方式，而第二个则是在交叉轴上的居中操作，想明白了这一点，就好办了，使用align-self对第二个项目修改布局方式就可以了。

          .container {
              display: flex;
   
          }
          .item:nth-child(2) {
              align-self: center;
          }

5. 两个项目处于两个角

   

   这个其实跟上一个也差不多，一样的思路，可以知道第二个项目是需要使用self属性单独设置的，但是在水平方向上两个处于两端要怎么实现呢？是的了，这时就需要对容器的主轴使用space-between布局了。

          .container {
              display: flex;
              justify-content: space-between;
          }
          .item:nth-child(2) {
              align-self: flex-end;
          }

三项目

1. 最基本的三个项目

   

   最基本的布局方式，只需要让容器display:flex就可以了

2. 对角线三项目

   

   这个其实跟前面的两个项目处于对角线上是一个道理。所以也只需要把第二个和第三个项目单独设置一下就可以了。

          .container {
              display: flex;
          }
          .item:nth-child(2) {
              align-self: center;
          }
          .item:nth-child(3) {
              align-self: flex-end;
          }

四项目

1. 三一分隔

   

   首先第一行是正常的布局，不用管。而本来应该在第二行的第四个项目到了第三行，显然是space-between布局，并且到了最后一列，所以主轴的布局方式也应该改变为flex-end。这里需要注意的是，由于需要多行多列，所以需要设置flex-wrap属性为wrap，即可换行，否则每个项目的大小将会被压缩。除此之外，由于不止一行，所以在设置交叉轴上的布局方式时要是用align-content属性。

          .container {
              display: flex;
              flex-wrap: wrap;
              align-content: space-between;
              justify-content: flex-end;
          }

   如此复杂的布局都只是使用容器的属性进行布局的，真的很神奇。

2. 四个项目四个角

   

   四个项目被分到了四个角，可以想到将四个项目分为两组，分别在水平和垂直方向上使用space-between就可以了。

          .container {
              display: flex;
              justify-content: space-between;
          }
          .column {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
          }

圣杯布局

    <div class="container">
        <header></header>
        <div class="mainbody">
            <div class="content"></div>
            <nav class="nav"></nav>
            <aside class="aside"></aside>
        </div>
        <footer></footer>
    </div>

        .container {
            display: flex;
            flex-direction: column;
        }
        header {
            flex: 1;
        }
        footer {
            flex: 1;
        }
        .mainbody {
            flex: 1;
            display: flex;
        }
        .nav {
            order: -1;
        }

其中包括两个flex部分，一个是最外围的container，还有一个是mainbody。

其中为了使得mainbody中的content即主要内容有限加载，将content标签放在了最前面，但是又想要content部分在中间，所以使用了order对flex中的项目进行排序。

搞完这个，果然对‘弹性’布局的理解更深了。

总结

flex既然能够作为一套完整的布局体系，就不是一时半会儿能够完全搞清楚的。这次也是对于flex布局有了一个大致的了解，以后如果学到了新的内容或者有了新的感悟，还会继续更新。毕竟才刚刚入门，其中的很多细节还是知之甚少，如文中有误，欢迎指出，学习讨论。