css3彈性盒模型flex快速入門與上手1
阿新 • • 發佈：2017-10-11
nes -1 相互 title 布局 viewport alt 默認值 lin
一、什麽是flex?
flex是css3中引入的一種布局方式，可以非常靈活高效控制元素的排列與對齊方式，大多數人稱之為彈性布局.
二、怎麽使用flex?
任何一個容器都可以指定為flex布局
1 #box { 2 display:flex; 3 }
三、flex的基本術語
- 采用flex布局的元素被稱為flex容器 (flex container), 它的子元素即為flex元素 (flex item).
- flex容器中包含兩個相互垂直的軸, 即主軸 (main axis)和副軸 (cross axis).
- flex元素沿主軸從主軸起點 (main start)到主軸終點 (main end)依次排布.
- 如果flex容器包含多行flex元素, 則flex行 (flex lines)沿副軸從副軸起點 (cross start)到副軸終點 (cross end)依次排布.
- 單個flex元素占據的主軸空間叫做主軸長度 (main size), 占據的副軸空間叫做副軸長度 (cross size).
四、有六個屬性設置在父容器上，來控制子元素的顯示方式:
| 屬性 | 含義 |
|---|---|
flex-direction |
主軸方向 |
flex-wrap |
換行樣式 |
flex-flow |
前兩個的簡寫形式 |
justify-content |
主軸對齊方式 |
align-items |
單行的副軸對齊方式 |
align-content |
多行的副軸對齊方式 |
五、flex-direction，設置主軸的對齊方向，有四個值:
row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5<meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>flex布局 - by ghostwu</title> 9 <style> 10 #box { 11 display: flex; 12 flex-direction: row; 13 } 14 #box div { 15 width: 100px; 16 height: 100px; 17 background: #09f; 18 margin: 10px; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div id="box"> 25 <div>1</div> 26 <div>2</div> 27 <div>3</div> 28 <div>4</div> 29 <div>5</div> 30 <div>6</div> 31 <div>7</div> 32 <div>8</div> 33 <div>9</div> 34 <div>10</div> 35 <div>11</div> 36 <div>12</div> 37 <div>13</div> 38 <div>14</div> 39 </div> 40 </body> 41 42 </html>
flex-direction設置為row：
flex-direction設置為row-reverse:
flex-direction設置為column，下面的示意圖我只截取了前面5個div,後面如果截取的話，圖片占的位置太多了，影響體驗.
flex-direction設置為column-reverse:
六、flex-wrap ：定義子元素超過一行，如何換行，常用屬性值:
- nowrap（默認值）：默認不換行。
- wrap：換行，第二行在第一行下面，從左到右
- wrap-reverse：換行，第二行在第一行上面，從左到右
1 #box { 2 display: flex; 3 flex-direction: row; 4 flex-wrap: nowrap; 5 }
flex-wrap:nowrap;
七、flex-flow:是flex-direction 和flex-wrap的簡寫形式，默認是 row nowrap
1 #box { 2 display:flex; 3 /* flex-flow: row nowrap; */ 4 /* flex-flow: row wrap; */ 5 /* flex-flow: row wrap-reverse; */ 6 /* flex-flow: row-reverse wrap-reverse; */ 7 flex-flow: column wrap; 8 }
八、 justify-content: 子元素在主軸對齊方式
flex-start（默認值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側的間隔相等。
1 #box { 2 display:flex; 3 flex-flow: row wrap; 4 /* justify-content: flex-start; */ 5 /* justify-content: flex-end; */ 6 /* justify-content: center; */ 7 /* justify-content: space-between; */ 8 justify-content: space-around; 9 }這裏主要搞清楚space-between和space-around的區別 justify-content: space-between;
css3彈性盒模型flex快速入門與上手1