flex佈局---基礎筆記

用途

1 方便移動端的適配
2 用taro作微信小程序只能用flex佈局

使用方法

1 容器：聲明flex佈局
display:flex/inline-flex
2 指定了彈性容器中子元素的排列方式局
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

---------------單行-----------------

3 放在容器中的樣式
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

——————多行———————— 4 溢出部分換行
flex-wrap: nowrap|wrap
5 每一行之間的間距
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

---

6 如下針對item佈局子元素 align-self: 元素自身在 Y軸上的對齊方式
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
flex: 功能上相似bootstrap列布局 1，1 ，2