flex layout

by imys

HTML

<h3>三栏，两栏固定，一栏自适应</h3>
<div class="box">
  <div class="item item-w200"></div>
  <div class="item item-fill"></div>
  <div class="item item-w100"></div>
</div>
<h3>双栏，固定+自适应</h3>
<div class="box">
  <div class="item item-w200"></div>
  <div class="item item-fill"></div>
</div>
<h3>纵轴三栏，两栏固定，一栏自适应</h3>
<div class="box flex-column">
  <div class="item item-h100"></div>
  <div class="item item-fill"></div>
  <div class="item item-h200"></div>
</div>
<h3>纵轴双栏，固定+自适应</h3>
<div class="box flex-column">
  <div class="item item-h100"></div>
  <div class="item item-fill"></div>
</div>

CSS

.box {
  display: flex;
  width: 100%;
  height: 200px;
}
.item {
  background: #eee;
  border: 2px solid #fff;
}
.item-w100 {
  width: 100px;
}
.item-w200 {
  width: 100px;
}
.item-fill {
  flex: 1
}
.flex-column {
  height: 500px;
  flex-direction: column;
}
.item-h100 {
  height: 100px;
}
.item-h200 {
  height: 100px;
}