flex布局是为了让布局变得简单的一个东西。
Paste_Image.png
flex布局的默认是首行左对齐。
- justify-content 可以控制元素在主轴方向的对齐位置
- center
- flex-end
- space-between 将空白均匀地填充在各个flex item中间
- align-items 可以移动主轴在副轴上的位置(影响整个轴的元素)
- center
- flex-end
- align-self 可以移动单个元素在副轴方向上的位置
- flex-direction 可以选择主轴方向，默认水平
- column
- flex-wrap
- wrap
利用flex做的一个小东西：
<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
