flex布局

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