flex布局
flex布局
flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction属性
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex-direction属性决定主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .flex1 { display: flex; display: -webkit-flex; } div { margin: 5px; height: 50px; background: yellow; flex: 1; } .row { flex-direction: row; } .row-reverse { flex-direction: row-reverse; } .column { flex-direction: column; } .column-reverse { flex-direction: column-reverse; } </style> <body> <section class="flex1 row"> <div>1 flex-direction:row（默认值）：主轴为水平方向，起点在左端</div> <div>2</div> <div>3</div> </section> <br/> <br/> <br/> <section class="flex1 row-reverse"> <div>1 row-reverse：主轴为水平方向，起点在右端</div> <div>2</div> <div>3</div> </section> <br/> <br/> <br/> <section class="flex1 column"> <div>1 column：主轴为垂直方向，起点在上沿 </div> <div>2</div> <div>3</div> </section> <br/> <br/> <br/> <section class="flex1 column-reverse"> <div>1 column-reverse：主轴为垂直方向，起点在下沿 </div> <div>2</div> <div>3</div> </section> </body> </html>
