1、基本概念
采用flex布局的元素成為flex容器，容器包括水平的主軸(main axis)和垂直的交叉軸(cross axis)，主軸包括開始位置(main start)和結束位置(main end),交叉軸也包括開始位置(cross start)和結束位置(cross end)。項目默認沿水平方向排序。
2、容器屬性
- flex-direction：決定主軸的方向
- row(默認值)：沿水平方向，起點在左邊
- row-reverse：沿水平方向，起點在右邊
- column：主軸為垂直方向，起點在上沿
- column-reverse：主軸為垂直方向，起點在下沿
- flex-wrap：如果一行容不下，將會換行
- nowrap(默認)：不換行
- wrap：換行，第一行在上方
- wrap-reverse：換行，第一行在下方
此時容易出現的問題是換行后下一行并不能緊挨著上一行，而是所有的行數平分整個高度，可以和align-content配合使用
- flex-flow：flex-direction和flex-wrap的簡寫形式，默認值為row nowrap
- justify-content：主軸的對齊方式
- flex-start|flex-end :水平左/右
- center：水平居中
- space-between：水平兩端對齊
- space-around：相當于margin屬性，內部元素平分水平寬度
- align-items：交叉軸的對齊方式
- flex-start | flex-end ：垂直方向的上下
- center 垂直居中
- baseline ：以垂直方向第一行文字的基線對齊
- stretch(默認值):如果項目未設置高度或設為auto，將占滿整個容器的高度
- align-content:多跟軸線的對齊方式
- flex-start | flex-end ：與交叉軸的起點/終點對齊
- center ：與交叉軸的中間對齊
- space-between ：與交叉軸的兩端對齊
- space-around ：平分整個交叉軸(內部的每一個元素都包括上下邊距)
- stretch ：占滿整個交叉軸
項目中屬性
- order<integer>：按照int進行排列
- flex-grow：放大比例
- flex-shrink：縮小比例
- flex-basis：可以設置大小，默認為auto
- flex：上面3個屬性的簡寫
- align-self：允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性
實例說明
CSS代碼
.box1 {
display: flex;
justify-content: center;
height: 120px;
width: 100%;
background: gainsboro;
}
.box2 {
display: flex;
justify-content: space-between;
height: 120px;
width: 100%;
background: gainsboro;
}
.container1 {
display: flex;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content1 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.container2 {
display: flex;
/*控制顯示方向*/
flex-direction: column;
height: 120px;
width: 120px;
background: dimgrey;
}
.container3 {
display: flex;
/*控制換個換行*/
flex-wrap: wrap;
/*多行的對齊方式*/
align-content: flex-start;
height: 120px;
width: 120px;
background: dimgrey;
margin-left: 10px;
margin-right: 10px;
}
.container4 {
display: flex;
/*設置內容的位置*/
justify-content: center;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container5 {
display: flex;
/*設置內容的位置*/
justify-content: flex-end;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container6 {
display: flex;
align-items: center;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container7 {
display: flex;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container8 {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container9 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.container10 {
display: flex;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content10 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.content10:nth-child(2){
align-self: center;
}
.container11 {
display: flex;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content11 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.content11:nth-child(2){
align-self: flex-end;
}
.container12 {
display: flex;
justify-content: space-between;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
.content12 {
background: #67cf22;
height: 40px;
width: 40px;
border-radius: 20px;
}
.content12:nth-child(2){
align-self: center;
}
.content12:nth-child(3){
align-self: flex-end;
}
.container13 {
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: flex-end;
height: 120px;
width: 120px;
background: dimgrey;
margin-right: 10px;
}
HTML代碼
<div class="box1">
<div class="container1">
<div class="content1"></div>
</div>
<div class="container2">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container3">
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container4">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container5">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container6">
<div class="content1"></div>
</div>
<div class="container7">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container8">
<div class="content1"></div>
<div class="content1"></div>
</div>
<div class="container9">
<div class="content1"></div>
<div class="content1"></div>
</div>
</div>
<div class="box2" style="margin-top: 10px;">
<div class="container10">
<div class="content10"></div>
<div class="content10"></div>
</div>
<div class="container11" >
<div class="content11"></div>
<div class="content11"></div>
</div>
<div class="container12" >
<div class="content12"></div>
<div class="content12"></div>
<div class="content12"></div>
</div>
<div class="container13" >
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
</div>
</div>
效果圖
效果圖
