Flex布局（二）

接上一篇，说一下flex布局的实例，转自阮一峰老师的博客

骰子的布局

html页面模版

<div class="box">
  <span class="item"></span>
</div>

div代表容器,span代表骰子的点

一个

左上对齐

.box {
  display: flex;
}

居中对齐

.box {
  display: flex;
  justify-content: center;
}

左对齐

.box {
  display: flex;
  justify-content: flex-end;
}

垂直靠左居中

.box {
    display: flex;
    align-items: center;
}

水平垂直居中

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

靠下水平居中

.box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

左下角

.box {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

两个

分散对齐

.box {
    display: flex;
    justify-content: space-between;
}

垂直分散对齐

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

水平居中\垂直分散对齐

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

水平靠右\垂直分散对齐

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

一个左上角,一个水平垂直居中

.box {
    display: flex;
}
.box .item:nth-child(2) {
    align-self: center;
}

一个左上角一个右下角

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

三个

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

四个

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

六个

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

九个

.box {
  display: flex;
  flex-wrap: wrap;
}