快来快来,这个博主终于更博啦~
一、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(不换行)