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