flex布局,在uniapp开发过程中最常用的且最高效布局方式,只需要下面12个属性,彻底告别uniapp布局排版问题,关注我们,了解编程中最干货的知识

名词解释:

容器: 一个盒子,可以理解为一个教室,这里我叫做父容器

项目: 放在一个盒子里面的一个盒子,可以理解为一张桌子,这里我叫做子容器

文章涉及内容:

12个属性,其中父容器6个属性,子容器6个属性

父容器属性

• flex-direction [往哪个方向排]

功能：控制容器的主轴方向[教室内桌子的主要方向]

可选值：

row［默认］：水平方向，从左向右

row-reverse：水平方向，从右向左

column：垂直方向，从上到下

column-reverse：垂直方向，从下向上

草图：

• flex-wrap［到头是否换行或列］

功能：子容器在父容器排列到头后是否换行

可选值：

nowrap［默认］：不换行

wrap：换行，新行在下

wrap-reverse：换行，新行在上

草图：

• flex-flow［flex-direction和flex-wrap的合并］

上图写法：{ flex-flow: row wap }

• justify-content［主轴上怎么对齐］

功能：子容器在主轴上的对齐方式

可选值：

flex-start［默认］：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，子容器之间的距离间隔相等

space-around：每个项目两侧的间隔相等

草图：

• align-items［次轴上怎么对齐］

功能：子容器在次轴［副主轴］上怎么对齐

可选值：

stretch［默认值］：子容器未设height或设为auto，子容器拉伸父容器次轴

flex-start：次轴的起点对齐

flex-end：次轴终点对齐

center：次轴居中对齐

baseline: 子容器和行文字［假设］的基线对齐。

草图：

• align-content［主次轴同时设置怎么对齐］

功能：只设置一个轴，参数失效

可选值：

stretch［默认值］：主次轴铺满

flex-start：次轴起点对齐。

flex-end：次轴终点对齐。

center：次轴中点对齐。

space-between：次轴两端对齐，距离间隔相等。

space-around：每根轴线两侧的间隔都相等

草图：