弹性布局方式flex

display:flex 布局方式总结

弹性布局方式深受程序员的喜爱，各大框架也非常的喜欢它，可是记忆模糊不清，就会给自己自我欺骗的机会。因此这篇文章帮助你牢记它。
首先我们需要安排上的代码是：{dispay:flex}第二我们就要开始我们想要的方式去书写代码了在此之前我们需要了解一下有关f的几个标签和标签属性。

1. flex-direction: row | row-reverse | column | column-reverse;
2. flex-wrap: nowrap | wrap | wrap-reverse;
3. justify-content: flex-start | flex-end | center | space-between | space-around;定义了在主轴上的对齐方式。（左对齐，右对齐，居中，两端对齐，两侧间隔相等）
4. align-items: flex-start | flex-end | center | baseline | stretch;定义项目在交叉轴上如何对齐（交叉轴的起点对齐，交叉轴的终点对齐，交叉轴的终点对齐，项目的第一行文字对齐）
5. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
   好了常用的就是这些了，点击查看参考文档
   现在让我们来实现面试常考的水平垂直居中吧！

 #app{
    
    
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content:center;
            flex-direction: column;
        }

记住属性和标签，然后就没有问题啦，学习一定要坚持下去喔！