Flex布局

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、Flex是什么？
• 二、如何使用
• 总结

---

前言

在标准流情况下会使网页布局不按照我们想要的效果呈现，这时就需要flex帮助

一、Flex是什么？

 display:flex; 是css中的属性，可以帮助我们完成页面布局

二、使用方法

1.flex-direction:___; 控制子元素的排列方向

flex-direction:row; 子元素从左到右横向排
flex-direction:row-reverse; 子元素从右边开始排列，最右边的是第一个元素

flex-direction:column; 子元素竖向排列,从上到下

flex-direction:column-reverse; 竖向排列，从下到上，最下面是第一个元素

2.flex-wrap:___; 在赋予子元素宽度的情况下，当一行显示不下所有子元素时，需要换行

flex-wrap:nowrap; 不换行
flex-wrap:wrap; 换行排列

flex-wrap:wrap-reserve; 反向换行，从下往上排列，最下面一行开始排，向上堆叠排列

---

总结

以上只是flex一部分，本文仅仅简单介绍了flex，而flex还有更多的使用技巧例如justify-content、align-items等，明天写