flex布局是為了讓布局變得簡(jiǎn)單的一個(gè)東西晴楔。
Paste_Image.png
flex布局的默認(rèn)是首行左對(duì)齊诚卸。
- justify-content 可以控制元素在主軸方向的對(duì)齊位置
- center
- flex-end
- space-between 將空白均勻地填充在各個(gè)flex item中間
- align-items 可以移動(dòng)主軸在副軸上的位置(影響整個(gè)軸的元素)
- center
- flex-end
- align-self 可以移動(dòng)單個(gè)元素在副軸方向上的位置
- flex-direction 可以選擇主軸方向，默認(rèn)水平
- column
- flex-wrap
- wrap
利用flex做的一個(gè)小東西：
<div class="face first-face">
<div class="pie"></div>
</div>
<div class="face second-face">
<div class="pie"></div>
<div class="pie"></div>
</div>
<div class="face third-face">
<div class="pie"></div>
<div class="pie"></div>
<div class="pie"></div>
</div>
<div class="face fourth-face">
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
</div>
<div class="face fifth-face">
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
<div class="column">
<div class="pie"></div>
</div>
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
</div>
<div class="face sixth-face">
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
<div class="column">
<div class="pie"></div>
<div class="pie"></div>
</div>
</div>
.face {
width:100px;
height:100px;
padding:17px;
box-sizing:border-box;
background-color:black;
border-radius:15px;
display:flex;
margin:10px;
float:left;
}
.first-face {
justify-content:center;
align-items:center;
}
.second-face {
justify-content:space-between;
}
.second-face .pie:nth-of-type(2) {
align-self:flex-end;
}
.third-face .pie:nth-of-type(2){
align-self:center;
}
.third-face .pie:nth-of-type(3) {
align-self:flex-end;
}
.fourth-face {
justify-content:space-between;
}
.fourth-face .column {
display:flex;
flex-direction:column;
justify-content:space-between;
}
.fifth-face {
justify-content:space-between;
}
.fifth-face .column {
display:flex;
flex-direction:column;
justify-content:space-between;
}
.fifth-face .column:nth-of-type(2){
justify-content:center;
}
.sixth-face {
justify-content:space-between;
}
.sixth-face .column {
display:flex;
flex-direction:column;
justify-content:space-between;
}
.pie {
width:20px;
height:20px;
background-color:white;
border-radius:15px;
}
Paste_Image.png
