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>