CSS#Flex-box, border-size, onresize() event, Media Queries

• 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个特性(点击)：
• flex-direction: row | row-reverse | column | column-reverse | initial |inherit
• flex-wrap: nowrap | wrap | wrap-reverse
• flex-flow 就是