Flex使用指南

快来快来，这个博主终于更博啦~

一、Flex布局

• 原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式
• 特点：
  a.一旦给父元素添加了display：flex；这个属性后子元素将不区分行内元素和块元素，此时的子元素就能够自定义宽度和高度
  b.任何元素均可用flex布局，可以理解为父盒子对子元素“一视同仁”
  c.不需要清除浮动，因此此时float、clear、vertical-align等属性失效

二、Flex属性

1.父项常见属性

先给大家看一下我整理的思维导图，大致常用属性：

2.子项常见属性

先给大家看一下我整理的思维导图，大致常用属性：

3.Flex布局展示

• flex-direction：row（默认值）水平方向起点在左端 ；
  row-reverse水平方向起点在右端 ；

水平方向：

• flex-direction：column 垂直方向 从上往下 ；
  column-reverse垂直方向 从下往上。
  垂直方向：
  

• flex-wrap：nowrap（不换行）

• flex-wrap：wrap（换行，第一行在上方）