響應式佈局：CSS-flexbox & Bootstrap

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://www.oschina.net/translate/boostrap-4-regular-vs-flex-grid?cmp

這個靈活的盒子模組，通常被稱為flexbox，被設計成一個一維的佈局模型，作為一種方法，可以在介面中提供專案之間的空間分佈和強大的對齊功能。本文概述了flex xbox的主要特性，我們將在後面的指南中更詳細地討論這些特性。

當我們將flexbox描述為一維時，我們是在描述這樣一個事實，即flexbox每次處理一個維度的佈局——以行或列的形式。這可以與CSS網格佈局(CSS Grid Layout)的二維模型進行對比，後者將列和行一起控制。

flexbox的兩個座標軸

the main axis and the cross axis.

Start and end lines

原來的CSS都是假設從右上開始然後水平寫到左下，flexbox包含了各種書寫模式，因此我們不再假設一行文字從文件的左上角開始，然後向右側執行，新行出現在另一行下面。

After a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.

flex容器

使用flexbox佈局的文件區域稱為flex容器。要建立flex容器，我們將區域容器的display屬性的值設定為flex或inline-flex。一旦我們這樣做了，容器的直接子元素就變成了flex item。
flex items:

• Items display in a row (the flex-direction property's default is row).
• The items start from the start edge of the main axis.
• The items do not stretch on the main dimension, but can shrink.
• The items will stretch to fill the size of the cross axis.
• The flex-basis property is set to auto.
• The flex-wrap property is set to nowrap.

Multi-line flex containers with flex-wrap 多行容器

應該把每行都作為一個新的flex容器。

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

Properties applied to flex items

• flex-grow
• flex-shrink
• flex-basis

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

.box {
  display: flex;
}

.one {
  flex: 1 1 auto;
}

.two {
  flex: 2 1 auto;
}

.three {
  flex: 3 1 auto;
}

Tutorial: Styling Angular CLI v6 apps with Bootstrap

實現響應式佈局的另外一種方式-bootstrap:

<div class="container">
  <div class="row">
    <div class="col-4">
      1 of 3
    </div>
    <div class="col-4">
      2 of 3 (wider)
    </div>
    <div class="col-4">
      3 of 3
    </div>
  </div>
</div>

.box {
  display: flex;
}

.one {
  flex: 1 1 auto;
}

.two {
  flex: 2 1 auto;
}

.three {
  flex: 3 1 auto;
}

至於用bootstrap還是自己擼CSS，網上也有討論，主要分為：
支援CSS的：
如果只是用部分功能，那麼引入bootstrap是殺雞用牛刀，讓工程變得很大；
支援bootstrap的：
bootstrap已經寫好了很多CSS，直接用就好。而且除了響應式佈局，很多其他的CSS也已經寫好了。