flex布局学习

亦凉 2022-06-05 04:10 229阅读 0赞

# Flex布局学习笔记 #

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

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

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

tips:

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

## 单项目 ##

1.  没有设置任何属性时的情况：
    
    ![1item\_01][1item_01]
    
    只设置外层容器container的display：flex就可以达成以上效果。
    
        .container { display: flex; }
2.  项目水平居中
    
    ![1item\_02][1item_02]
    
    在flex布局中，最重要的莫过于那两条互相垂直的轴了，主轴是默认是水平的，所以想要将某个元素水平居中，只需要将主轴上的布局修改为居中的布局就可以了。
    
        .container { display: flex; justify-content: center; }
3.  项目向右对齐
    
    ![1item\_03][1item_03]
    
    默认的对齐方式是向左的，所以想要实现向右对齐，也只需要改变容器主轴的布局方式为向左对齐即可。其实在flex中为了使得轴的方向改变之后语义仍然没有问题，这里应该改为向主轴的末端对齐。
    
        .container { display: flex; justify-content: flex-end; }
4.  垂直居中
    
    ![1item\_04][1item_04]
    
    前面我们都是一直在一个轴上的操作，想要实现垂直居中就要使用另一个和主轴垂直的交叉轴了。交叉轴上的操作和主轴上的操作是类似的，只需要改变布局方式就可以了。不同的只是属性罢了。
    
        .container { display: flex; align-items: center; }
5.  水平垂直居中
    
    ![1item\_05][1item_05]
    
    水平垂直居中的话只需要把两个轴的布局都设置为居中就可以了。
    
        .container { display: flex; align-items: center; justify-content: center; }

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

## 双项目 ##

1.  两个项目分居两边
    
    ![2item\_01][2item_01]
    
    其实这样的布局，也是轴的基本布局的一种，可以通俗的理解为将容器中的项目在轴的方向上两端对齐，项目之间的间隔是相等的。
    
        .container { display: flex; justify-content: space-between; }
2.  竖直方向上的两端对齐
    
    ![2item\_02][2item_02]
    
    一眼就能看出来，这个不就是上一个倒了一下么，所以我们只需要把轴转一下就可以实现这个效果了。
    
        .container { display: flex; flex-direction: column; justify-content: space-between; }
3.  两端对齐加居中
    
    ![2item\_03][2item_03]
    
    这个跟上一个也没有多大的变化，只不过水平居中了一下。那么是不是只需要改一下主轴的布局就可以了。这里就需要注意一下了，由于我们之前已经将主轴的方向修改过了，所以主轴现在竖直的，因此修改主轴是不行的。这时另一个轴的方向，也会随着主轴方向的改变而改变，毕竟名叫交叉轴嘛。所以我们只需要在上一个的基础上，修改交叉轴的布局为居中就可以了。
    
        .container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
4.  两个项目位于对角线上
    
    ![2item\_04][2item_04]
    
    想要实现这样的布局，只靠两个轴的布局显然是不同的，因为两个项目的布局方式是不一样的，第一个是默认的布局方式，而第二个则是在交叉轴上的居中操作，想明白了这一点，就好办了，使用align-self对第二个项目修改布局方式就可以了。
    
        .container { display: flex; }
               .item:nth-child(2) { align-self: center; }
5.  两个项目处于两个角
    
    ![2item\_05][2item_05]
    
    这个其实跟上一个也差不多，一样的思路，可以知道第二个项目是需要使用self属性单独设置的，但是在水平方向上两个处于两端要怎么实现呢？是的了，这时就需要对容器的主轴使用space-between布局了。
    
        .container { display: flex; justify-content: space-between; }
               .item:nth-child(2) { align-self: flex-end; }

## 三项目 ##

1.  最基本的三个项目
    
    ![3item\_01][3item_01]
    
    最基本的布局方式，只需要让容器display:flex就可以了
2.  对角线三项目
    
    ![3item\_02][3item_02]
    
    这个其实跟前面的两个项目处于对角线上是一个道理。所以也只需要把第二个和第三个项目单独设置一下就可以了。
    
        .container { display: flex; }
               .item:nth-child(2) { align-self: center; }
               .item:nth-child(3) { align-self: flex-end; }

## 四项目 ##

1.  三一分隔
    
    ![4item\_01][4item_01]
    
    首先第一行是正常的布局，不用管。而本来应该在第二行的第四个项目到了第三行，显然是space-between布局，并且到了最后一列，所以主轴的布局方式也应该改变为flex-end。这里需要注意的是，由于需要多行多列，所以需要设置flex-wrap属性为wrap，即可换行，否则每个项目的大小将会被压缩。除此之外，由于不止一行，所以在设置交叉轴上的布局方式时要是用align-content属性。
    
        .container { display: flex; flex-wrap: wrap; align-content: space-between; justify-content: flex-end; }
    
    如此复杂的布局都只是使用容器的属性进行布局的，真的很神奇。
2.  四个项目四个角
    
    ![4item\_02][4item_02]
    
    四个项目被分到了四个角，可以想到将四个项目分为两组，分别在水平和垂直方向上使用space-between就可以了。
    
        .container { display: flex; justify-content: space-between; }
               .column { display: flex; flex-direction: column; justify-content: space-between; }

## 圣杯布局 ##

![圣杯][SouthEast]

.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布局有了一个大致的了解，以后如果学到了新的内容或者有了新的感悟，还会继续更新。毕竟才刚刚入门，其中的很多细节还是知之甚少，如文中有误，欢迎指出，学习讨论。

[blog]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[1item_01]: /images/20220605/add914b1e4bb4cfeb959e89e98f3b5da.png
[1item_02]: /images/20220605/3ec2859ed7844fd9a9652852a3827fc2.png
[1item_03]: 
[1item_04]: /images/20220605/d8c49885d58543b0a216b86143ee6803.png
[1item_05]: /images/20220605/ff1c5ea642cd4314bc355f1a7bb45f4d.png
[2item_01]: /images/20220605/5e2e56b33be94472a2ac9dc3d50b4e33.png
[2item_02]: /images/20220605/55bd1d3c87814f03958871d2cfcfd488.png
[2item_03]: /images/20220605/c77e282d45864f8da582e3bf2b779a43.png
[2item_04]: /images/20220605/6d28bace1b6a430496d492b2d3ebc4df.png
[2item_05]: /images/20220605/88ab5af3f68b43c08bb7d2a650d70ba2.png
[3item_01]: /images/20220605/ffc9abc4f5dd412e93fabacf025879de.png
[3item_02]: /images/20220605/f166a6d037a3421ab0dfe26e8895de95.png
[4item_01]: /images/20220605/b27e08944d654d819c135812a8a54622.png
[4item_02]: /images/20220605/88a16c08fee94493adabc6d16f390fc6.png
[SouthEast]: /images/20220605/3443029d440542198153fffe76335675.png