弹性盒子 flex-direction
生活随笔
收集整理的這篇文章主要介紹了
弹性盒子 flex-direction
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用彈性盒子可以更方便的對頁面內容進行布局
flex-direction指定了子元素在父元素盒子中的排列方式
1.flex-direction:row
flex默認排列方式，從左到右排列，左對齊
2.flex-direction：row-reverse
與row反向，從右向左排列，右對齊，第一個在最右邊
3.flex-direction：column
從上到下依次排列，向上對齊
4.flex-direction：column-reverse
與column相反，從下到上對齊，第一個在最下面
?
說明：HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>flex</title><link rel="stylesheet" href="flex.css"> </head> <body><div id="content"><div>div1</div><div>div2</div><div>div3</div></div> </body> </html>row：
#content {width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction: row; } #content>div {width: 100px;height: 100px;margin: 10px;background: #e53935; }樣式：
row-reverse：
#content {width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction: row-reverse; } #content>div {width: 100px;height: 100px;margin: 10px;background: #e53935; }
樣式：
column：
#content {width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction:column; } #content>div {width: 100px;height: 100px;margin: 10px;background: #e53935; }
樣式：
column-reverse：
#content {width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction:column-reverse; } #content>div {width: 100px;height: 100px;margin: 10px;background: #e53935; }
樣式：
轉載于:https://www.cnblogs.com/zhangcheng001/p/10948985.html
總結
以上是生活随笔為你收集整理的弹性盒子 flex-direction的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： alloc 和 init都做了什么验证。
- 下一篇： 第一章 进程管理