• flex

  新的 flexbox 技術重新定義了使用 CSS 版面配置的方法。遺憾的是 flexbox規範最近的變動過多，導致不同瀏覽器之間對它的實作也有所差異，不過我仍想分享一些例子來讓你知道即將發生的改變。這些例子目前只能運作在有實作最新版標準的某些瀏覽器上。

  網路上有不少過時的 flexbox 資料，如果你想瞭解更多有關 flexbox 的內容，可以從這裡學習如何識別資料是否過時。

  你還可以使用 flexbox 做到更多版面配置的技巧，這裡只是一些讓你瞭解概念的例子而已：

  • 簡單的版面

  .container {
    display: -webkit-flex;
    display: flex;
  }
  nav {
    width: 200px;
  }
  .flex-column {
    -webkit-flex: 1;
            flex: 1;
  }
  

  • 複雜的版面

  .container {
    display: -webkit-flex;
    display: flex;
  }
  .initial {
    -webkit-flex: initial;
            flex: initial;
    width: 200px;
    min-width: 100px;
  }
  .none {
    -webkit-flex: none;
            flex: none;
    width: 200px;
  }
  .flex1 {
    -webkit-flex: 1;
            flex: 1;
  }
        flex: 2;
  }
  

  • 居中的版面

  .vertical-container {
    height: 300px;
    display: -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
  }
  

參考資料：https://zh-tw.learnlayout.com/flexbox.html