flex布局

flex布局样式
.div1{
    display: flex;
}
.div2{
    flex: auto;
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin-left: 10px;
    background-color: lightblue;
}
.div5{
    display: inline-flex;
}
.div6{
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: red;
    text-align: center;
    margin-left: 10px;
}
.div7{
    display: flex;
    flex-direction: column;/*竖着排列*/
    text-align: center;
    margin-left: 10px;
}

.div9{
    display: flex;
    flex-direction: column-reverse;/*竖着倒叙*/
    text-align: center;
}
.div10{
    display: flex;
    flex-direction: row;/*竖着倒叙*/
    text-align: center;
}
.div11{
    display: flex;
    flex-direction: row-reverse;
    text-align: center;
}
.div8{
    text-align: center;
    width: 200px;
    margin-bottom: 10px;
    margin-left: 10px;
    line-height: 50px;
    background-color: lightcoral;
}
.div12{
    display: flex;
    flex-flow: wrap-reverse;
}
.div13{
    display: flex;
    flex-flow: nowrap;
}
.div14{
    display: flex;
    justify-content: flex-start;
}
.div15{
    display: flex;
    justify-content: flex-end;
}
.div16{
    display: flex;
    justify-content: center;
}
.div17{
     display: flex;
     justify-content: space-between;/*两端对齐*/
}
.div18{
    display: flex;
    justify-content:space-around/*两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。*/
}
.div19{
    display: flex;
    height: 500px;
    background-color: lightblue;
    align-items:flex-start;/*交叉轴的起点对齐*/
}
.div20{
    display: flex;
    height: 500px;
    background-color: lightblue;
    align-items:flex-end;/*交叉轴的终点对齐*/
}
.div21{
    display: flex;
    height: 500px;
    background-color: lightblue;
    align-items:center;/*交叉轴的中点对齐*/
}
.div22 {
    display: flex;
    height: 500px;
    background-color: lightblue;
    align-items: baseline; /*第一行文字基线对齐*/
}
.div23{
    display: flex;
    height: 500px;
    background-color: lightblue;
    align-items:stretch;/*第一行文字基线对齐*/
}

<h1>display=flex</h1>
<div class="div1">
    <div class="div2">前端导航</div>
    <div class="div2">破解宝典</div>
    <div class="div2">最新特效</div>
    <div class="div2">网页布局</div>
    <div class="div2">参考网址</div>
    <div class="div2">更多精彩</div>
</div>
<br>
<br>
<br>
<h1>display=flex</h1>
<div class="div1">
    <div class="div2">flex</div>
    <div class="div2">flex</div>
    <div class="div2">flex</div>
    <div class="div2">flex</div>
    <div class="div2">flex</div>
</div>
<br>
<br>
<br>
<h1>display=inline-flex</h1>
<div class="div5">
    <div class="div6">inline-flex</div>
    <div class="div6">inline-flex</div>
    <div class="div6">inline-flex</div>
    <div class="div6">inline-flex</div>
    <div class="div6">inline-flex</div>
</div>
<br>
<br>
<br>
<h1>column1</h1>
<div class="div7">
    <div class="div8">column1</div>
    <div class="div8">column2</div>
    <div class="div8">column3</div>
    <div class="div8">column4</div>
    <div class="div8">column5</div>
</div>
<br>
<br>
<br>
<h1>column-reverse</h1>
<div class="div9">
    <div class="div8">column1</div>
    <div class="div8">column2</div>
    <div class="div8">column3</div>
    <div class="div8">column4</div>
    <div class="div8">column5</div>
</div>
<br>
<br>
<br>
<h1>row</h1>
<div class="div10">
    <div class="div8">row1</div>
    <div class="div8">row2</div>
    <div class="div8">row3</div>
    <div class="div8">row4</div>
    <div class="div8">row5</div>
</div>
<br>
<br>
<br>
<h1>row1-reverse</h1>
<div class="div11">
    <div class="div8">row-reverse1</div>
    <div class="div8">row-reverse2</div>
    <div class="div8">row-reverse3</div>
    <div class="div8">row-reverse4</div>
    <div class="div8">row-reverse5</div>
</div>
<br>
<br>
<br>
<h1>wrap</h1>
<div class="div12">
    <div class="div8">wrap1</div>
    <div class="div8">wrap2</div>
    <div class="div8">wrap3</div>
    <div class="div8">wrap4</div>
    <div class="div8">wrap5</div>
    <div class="div8">wrap6</div>
    <div class="div8">wrap7</div>
    <div class="div8">wrap8</div>
    <div class="div8">wrap9</div>
    <div class="div8">wrap10</div>
    <div class="div8">wrap11</div>
    <div class="div8">wrap12</div>
    <div class="div8">wrap13</div>
    <div class="div8">wrap14</div>
</div>
<br>
<br>
<br>
<h1>nowrap</h1>
<div class="div13">
    <div class="div8">wrap1</div>
    <div class="div8">wrap2</div>
    <div class="div8">wrap3</div>
    <div class="div8">wrap4</div>
    <div class="div8">wrap5</div>
    <div class="div8">wrap6</div>
    <div class="div8">wrap7</div>
    <div class="div8">wrap1</div>
    <div class="div8">wrap2</div>
    <div class="div8">wrap3</div>
    <div class="div8">wrap4</div>
    <div class="div8">wrap5</div>
    <div class="div8">wrap6</div>
    <div class="div8">wrap7</div>
</div>
<br>
<br>
<br>
<h1> justify-content: flex-start</h1>
<div class="div14">
    <div class="div8">flex-start1</div>
    <div class="div8">flex-start2</div>
    <div class="div8">flex-start3</div>
    <div class="div8">flex-start4</div>
    <div class="div8">flex-start5</div>
</div>
<br>
<br>
<br>
<h1> justify-content: flex-end</h1>
<div class="div15">
    <div class="div8">flex-end1</div>
    <div class="div8">flex-end2</div>
    <div class="div8">flex-end3</div>
    <div class="div8">flex-end4</div>
    <div class="div8">flex-end5</div>
</div>
<br>
<br>
<br>
<h1> justify-content: center</h1>
<div class="div16">
    <div class="div8">center1</div>
    <div class="div8">center2</div>
    <div class="div8">center3</div>
    <div class="div8">center4</div>
    <div class="div8">center5</div>
</div>
<br>
<br>
<br>
<h1> justify-content: space-between</h1>
<div class="div17">
    <div class="div8">space-between1</div>
    <div class="div8">space-between2</div>
    <div class="div8">space-between3</div>
    <div class="div8">space-between4</div>
    <div class="div8">space-between5</div>
</div>
<br>
<br>
<br>
<h1> justify-content: space-around</h1>
<div class="div18">
    <div class="div8">space-around1</div>
    <div class="div8">space-around2</div>
    <div class="div8">space-around3</div>
    <div class="div8">space-around4</div>
    <div class="div8">space-around5</div>
</div>
<br>
<br>
<br>
<h1>flex-start</h1>
<div class="div19">
    <div class="div8">flex-start1</div>
    <div class="div8">flex-start2</div>
    <div class="div8">flex-start3</div>
    <div class="div8">flex-start4</div>
    <div class="div8">flex-start5</div>
</div>
<br>
<br>
<br>
<h1>flex-end</h1>
<div class="div20">
    <div class="div8">flex-end1</div>
    <div class="div8">flex-end2</div>
    <div class="div8">flex-end3</div>
    <div class="div8">flex-end4</div>
    <div class="div8">flex-end5</div>
</div>
<br>
<br>
<br>
<h1>center</h1>
<div class="div21">
    <div class="div8">center1</div>
    <div class="div8">center2</div>
    <div class="div8">center3</div>
    <div class="div8">center4</div>
    <div class="div8">center5</div>
</div>
<br>
<br>
<br>
<h1>baseline</h1>
<div class="div22">
    <div class="div8">baseline1</div>
    <div class="div8">baseline2</div>
    <div class="div8">baseline3</div>
    <div class="div8">baseline4</div>
    <div class="div8">baseline5</div>
</div>
<br>
<br>
<br>
<h1>stretch</h1>
<div class="div23">
    <div class="div8">stretch1</div>
    <div class="div8">stretch2</div>
    <div class="div8">stretch3</div>
    <div class="div8">stretch4</div>
    <div class="div8">stretch5</div>
</div>