说明:大家在看弹性布局这一块,最好按照从上到下一点一点看,因为上下联系比较紧密。
弹性布局基本概念
任何一个容器都可以设置弹性布局,一旦容器设置了 弹性布局以后,子元素的float、clear和vertical-align属性将失效。
如果设置容器的水平方向为主轴,则垂直方向为交叉轴。
如果设置容器的垂直方向为主轴,则水平方向为交叉轴。
弹性布局父类容器常用属性
设置容器为弹性布局 display
display:flex 设置块元素为弹性布局
display:inline-flex 设置行内元素为弹性布局
子元素排列方向 flex-direction
flex-direction : row(默认值)
设置容器的水平方向为主轴,垂直方向为交叉轴,起点在左端,子元素在主轴上从左向右排列。
<html> <head> <style> .box{ width: 800px; height: 500px; border: 5px solid red; display: flex; flex-direction: row; } .boxSelf{ width: 100px; height: 50px; border: 5px solid red; } </style> </head> <body> <div class="box"> <div class="boxSelf">1</div> <div class="boxSelf">2</div> <div class="boxSelf">3</div> <div class="boxSelf">4</div> <div class="boxSelf">5</div> </div> </body> </html>
flex-direction : row-reverse
设置容器水平方向为主轴,垂直方向为交叉轴,起点在右端,子元素在主轴上从右向左排列。
flex-direction : column
设置容器垂直方向为主轴,水平方向为交叉轴,起点在上端, 子元素在主轴上从上向下排列。
flex-direction : column-reverse
设置容器垂直方向为主轴,水平方向为交叉轴,起点在下端, 子元素在主轴上从下向上排列。