<html>
<head>
<style>
div{
text-align:center;
color:#fff;
font-weight:bold;
font-size:16px;
line-height:30px;
}
/*縱向排列*/
.direcitonDemo{
display:flex;
flex-direction: column;
}
.part1{
background:orange;
height:30px;
width:40px;
margin:5px;
}
/*橫向排列*/
.rowDemo{
display:flex;
flex-direction: row;
}
.part2{
background:orange;
height:30px;
width:40px;
margin:5px;
}
/*不換行*/
.nowrapDemo{
display:flex;
flex-wrap:nowrap;
}
/*換行*/
.wrapDemo{
display:flex;
flex-wrap:wrap;
}
/*換到第一行*/
.wrap_reverseDemo{
display:flex;
flex-wrap:wrap-reverse;
}
.part3{
background:orange;
height:30px;
margin:5px;
width:500px;
}
.part4{
background:orange;
margin:5px;
width:40px;
line-height: inherit;/*從父元素繼承 line-height 屬性*/
}
.part5{
background:orange;
margin:5px;
flex-grow:2;
line-height: inherit;/*從父元素繼承 line-height 屬性*/
}
.part6{
background:orange;
margin:5px;
flex-grow:1;
line-height: inherit;/*從父元素繼承 line-height 屬性*/
}
/*水平左對齊*/
.flextStartDemo{
display:flex;
border:1px solid orange;
}
/*水平右對齊*/
.flexEndDemo{
display:flex;
justify-content:flex-end;
border:1px solid orange;
}
/*中間對齊*/
.centerDemo{
display:flex;
justify-content:center;
border:1px solid orange;
}
/*兩端對齊*/
.spacebetweenDemo{
display:flex;
justify-content:space-between;
border:1px solid orange;
}
/*兩側間隔相等*/
.spaceAroundDemo{
display:flex;
justify-content:space-around;
border:1px solid orange;
}
/*交叉軸的起點對齊*/
.alignStartDemo{
display:flex;
align-items:flex-start;/*垂直對齊*/
justify-content:center;/*水平中間對齊*/
height:90px;
border:1px solid orange;
}
/*交叉軸的終點對齊*/
.alignEndDemo{
display:flex;
align-items:flex-end;
justify-content:center;/*水平中間對齊*/
height:90px;
border:1px solid orange;
}
/*垂直中間對齊*/
.alignCenterDemo{
display:flex;
align-items:center;/*垂直對齊*/
justify-content:center;/*水平中間對齊*/
height:90px;
border:1px solid orange;
}
/*第一行文字的基線對齊*/
.alignBaselineDemo{
display:flex;
align-items:baseline;/*垂直對齊*/
justify-content:center;/*水平中間對齊*/
height:90px;
border:1px solid orange;
}
.alignStretchDemo{
display:flex;
align-items:stretch;/*垂直填充佔滿*/
justify-content:center;/*水平中間對齊*/
height:90px;
line-height:90px;
border:1px solid orange;
}
.growDemo{
display:flex;
flex-grow:1;
}
</style>
</head>
<body>
<h4>3.1.縱向排列:flex-direction: column</h4>
<div class="direcitonDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h4>3.2.橫向排列 flex-direction: row</h4>
<div class="rowDemo">
<div class="part2">1</div>
<div class="part2">2</div>
<div class="part2">3</div>
</div>
<h4>3.3.換行屬性 flex-wrap</h4>
<h5>3.3.1.不換行 flex-wrap:nowrap</h5>
<div class="nowrapDemo">
<div class="part3">1</div>
<div class="part3">2</div>
<div class="part3">3</div>
<div class="part3">4</div>
</div>
<h5>3.3.2.換行 flex-wrap:wrap</h5>
<div class="wrapDemo">
<div class="part3">1</div>
<div class="part3">2</div>
<div class="part3">3</div>
<div class="part3">4</div>
</div>
<h5>3.3.3.換到第一行 flex-wrap:wrap_reverse</h5>
<div class="wrap_reverseDemo">
<div class="part3">1</div>
<div class="part3">2</div>
<div class="part3">3</div>
<div class="part3">4</div>
</div>
<h4>3.4.水平位置佈局justify-content</h4>
<h5>3.4.1.左對齊(默認) justify-content:flex-start</h5>
<div class="flextStartDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.4.2.右對齊 justify-content:flex-end</h5>
<div class="flexEndDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.4.3.中間對齊 justify-content:center</h5>
<div class="centerDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.4.4.兩端對齊 justify-content:space-between</h5>
<div class="spacebetweenDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.4.5.兩側間隔相等 justify-content:space-around</h5>
<div class="spaceAroundDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h4>3.5.垂直佈局 align-items</h4>
<h5>3.5.1.交叉軸的起點對齊 align-items:flex-start</h5>
<div class="alignStartDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.5.2.交叉軸的終點對齊 align-items:flex-end</h5>
<div class="alignEndDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.5.3.交叉軸的中點對齊 align-items:center</h5>
<div class="alignCenterDemo">
<div class="part1">1</div>
<div class="part1">2</div>
<div class="part1">3</div>
</div>
<h5>3.5.4.第一行文字的基線對齊 align-items:baseline</h5>
<div class="alignBaselineDemo">
<div class="part1" style="height:50px;">1</div>
<div class="part1" style="height:30px;">2</div>
<div class="part1" style="height:70px;">3</div>
</div>
<h5>3.5.5.未設置高度,高度將沾滿整個容器的高度 align-items:stretch</h5>
<div class="alignStretchDemo">
<div class="part4">1</div>
<div class="part4">2</div>
<div class="part4">3</div>
</div>
<h5>4.1.元素放大比例,默認0 flex-grow:1</h5>
<div class="growDemo">
<div class="part5">1</div>
<div class="part6">2</div>
<div class="part6">3</div>
</div>
</body>
</html>
