display:flex / step2

by Kim Ara

HTML

<div id="wrap1" class="div-wrap">
  <div class="item1">1</div>
  <div class="item2">2<p>22</p></div>
  <div class="item3">3<p>33</p></div>
</div>

<div id="wrap2" class="div-wrap">
  <div class="item4">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

<div id="wrap3" class="div-wrap">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

CSS

*{margin:0;padding:0}
.div-wrap{width:500px;height:100px;margin:10px;color:#fff;text-align:center}
.div-wrap div{width:33.3%;height:100%}
.item1{background:red;align-self:center}
.item2{background:green}
.item3{background:blue}
.item4{background:pink}
.item5{background:yellow}
.div-wrap p{width:100%}

#wrap1{display:flex;align-items:center}
#wrap1 .item2{display:flex;align-items:center}
#wrap1 .item3{display:flex}
#wrap1 .item3 p{align-self:center}

#wrap2{display:flex;flex-wrap:wrap;align-content:space-between;width:100px;height:200px;border:1px solid #000}
#wrap2 div{width:100%;height:50px}

#wrap3{display:flex}
#wrap3 .item1{flex:1 1 2}
#wrap3 .item2{flex:1 1 0}
#wrap3 .item3{flex:2 2 0}