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的结合