响应式布局：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.

第一组-main axis
第一组-cross axis 第二组-main axis
第二组-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也已经写好了。