微信小程序布局理解——flex、block、inline

独占⼀⾏：view、swiper

不独占⼀⾏：text

• display:inline; 内联元素，简单来说就是在同⼀⾏显⽰。他没有⾼度，给内联元素设置width和height是没效果的
• display:block; 块级元素，简单来说就是就是有换⾏，会换到第⼆⾏。同时可以设置宽⾼。
• inline-block 的元素既具有 block 元素可以设置宽⾼的特性，同时⼜具有 inline 元素默认不换⾏的特性。⽐如 inline-block 元素也可以

flex布局

• flex-direction: row默认向右 | row-reverse向左 | column向下 | column-reverse向上
• flex-wrap: 默认 nowrap 不换⾏ wrap 换⾏ wrap-reverse 反向换⾏，第⼀⾏在下⽅
• justify-content: 主轴上的对齐⽅式 flex-start 默认左对齐 flex-end 右对齐 center 居中 space-between 两端对齐，项⽬之间的间隔都相等
• space-around 每个项⽬两侧的间隔相等
• align-items: center;垂直主轴的对齐⽅式，假设交叉轴从上到下默认 stretch 占满整个容器的⾼度 flex-start 上对齐 flex-end 下对齐
• center 中点对齐 baseline 第⼀⾏⽂字基线对齐