• Flexbox

  • Pseudo-classes

  • box-sizing: border-box

  • HTML DOM event  resize()

  • @media Queries： 根据一些css条件，触发一些css的变化。（无需javascript）
  • Responsive CSS ： 网格Gird就是模拟了Bootstrap，配合@media，可以激发不同的类。

Knowledge: Flexbox Layout Module

个人感觉可以替代Bootstrap4的布局了。当然还是Bootstrap4用起来更方便一些。

传统的布局：

  1. Block
  2. Inline
  3. Table
  4. Positioned, 用于指定元素位置。

新的Flexbox. 用于响应式布局，无需使用float 或 positioning.

父元素设置:
display: flex | inline-flex

子元素布局：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

方法：

先定义根元素特性

    1. 定义一个根元素，作为容器<div class='flex-container'>
    2. 根元素:  display: flex;  让这个元素使用a block-level flex的模式
    3. 如果一个元素成为flex container, 它可以使用相关的6个特性(点击)：