Flex布局属性详解 左对齐 右对齐
flex布局利用修改父元素display:flex实现
1 、 flex-direction属性
取值:row(默认)|| row-reverse || column || column-reverse
解释:row为横向排列,顺序为1-2-3. row-reverse为横向排列,但顺序为3-2-1. column为纵向排列,顺序为1-2-3. column-reverse为纵向排列,但顺序为3-2-1
<style> * { margin: 0; padding: 0; } .main { width: 900px; height: 100px; display: flex; flex-direction: column-reverse; } .box1, .box2, .box3 { width: 300px; height: 100px; text-align: center; } </style> <body> <div class="main"> <div class="box1" style="background-color: red">1</div> <div class="box2" style="background-color: green">2</div> <div class="box3" style="background-color: blue">3</div> </div> </body>
2、 flex-wrap属性
取值:nowrap(默认) || wrap || wrap-reverse
解释:nowrap表示不换行,wrap表示换行,wrap-reverse表示换行,第一排紧紧贴在容器底部。
3、 justify-content属性
取值:flex-start(默认)|| flex-end || center || space-between || space-around
解释:表示横轴对齐方式:flex-start表示左对齐,flex-end为右对齐,center居中对齐,space-between表示左右两端对齐,space-around为项目之间间距为左右两侧项目到容器间距的2倍
3、 align-items属性
取值:flex-start || flex-end || center || baseline || stretch(默认)
解释:表示纵轴排列方式:stretch表示不设置高度,占满整个屏幕。flex-start表示纵轴紧贴容器顶部。center表示在纵轴中心排列。flex-end表示紧贴容器底部。baseline表示以第一行文字的基线为参照
4、 align-content属性
表示多行项目的对齐方式,和align-item一样