使用彈性盒子可以更方便的對頁面內容進行布局
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; }
樣式：
