flex布局-微信小程序

flex布局-微信小程序

---

布局简介

flex 是flexible Box 的缩写-“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。采用flex布局的盒子称之为容器，容器里面的成员称之项目

布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

开启布局

display: flex;

---

父项属性

flex-direction --- 设置主轴方向

属性值	作用（主轴方向）
row	x（左→右）（默认）
row-reverse	x（右→左）（项目逆序排列）
column	y（上→下）
column-reverse	y（上→下）（项目逆序排列）

justify-content --- 设置主轴上的子元素排列方式（主轴只能是x轴）

属性值	作用（对齐方式）
flex-start	项目左对齐（默认）
flex-end	项目右对齐
center	项目居中
space-around	项目平均分配空间
space-between	左项目做对齐；右项目右对齐；其余项目平均分配空间

flex-wrap --- 设置子元素是否换行

属性值	作用（是否换行）
nowrap	不换行（默认）
wrap	换行

align-items --- 设置侧轴上子元素的排列方式（单行）（主轴只能是y轴）

属性值	作用（对齐方式）
flex-start	项目左对齐
flex-end	项目右对齐
center	项目居中
stretch	拉伸（拉伸对象在拉伸方向上不能设置空间大小）

align-content --- 设置侧轴上子元素的排列方式（多行）（主轴只能是y轴）

属性值	作用（对齐方式）
flex-start	项目左对齐
flex-end	项目右对齐
center	项目居中
space-around	项目平均分配空间
space-between	左项目左对齐；右项目右对齐；其余项目平均分配空间
stretch	拉伸（拉伸对象在拉伸方向上不能设置空间大小）

flex-flow --- flex-direction和flex-wrap的结合

---