CSS Flex排版--解決垂直居中問題，兩列等高問題，自適應寬問題

CSS 三大經典問題：垂直居中問題，兩列等高問題，自適應寬問題。今天用flex總結一下

垂直居中

<div id="parent">
  <div id="child">
  </div>
</div>


#parent {
  display:flex;
  width:300px;
  height:300px;
  outline:solid 1px;
  justify-content:center;
  align-content:center;
  align-items:center;
}
#child {
  width:100px;
  height:100px;
  outline:solid 1px;
}

思路是創建一個只有一行的 flexbox，然後用 align-items:center; 和 align-content:center; 來保證行位於容器中，元素位於行中。

兩列等高：

<div class="parent">
  <div class="child" style="height:300px;">
  </div>
  <div class="child">
  </div>
</div>
<br/>
<div class="parent">
  <div class="child" >
  </div>
  <div class="child" style="height:300px;">
  </div>
</div>



.parent {
  display:flex;
  width:300px;
  justify-content:center;
  align-content:center;
  align-items:stretch;
}
.child {
  width:100px;
  outline:solid 1px;
}

思路是創建一個只有一行的 flexbox，然後用 stretch 屬性讓每個元素高度都等於行高。

自適應寬：

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>


.parent {
  display:flex;
  width:300px;
  height:200px;
  background-color:pink;
}
.child1 {
  width:100px;
  background-color:lightblue;
}
.child2 {
  width:100px;
  flex:1;
  outline:solid 1px;
}

這個是 Flex 設計的基本能力了，給要自適應的元素添加 flex 屬性即可