灵活布局初步学习

时间：2023-04-02 19:51:41 HTML

今天刚学了微信小程序。在学习微信小程序之前，首先要熟悉灵活布局。如果将一个元素设置为display:flex，则其所有子元素都将成为容器成员，称为项目。此外，子元素的float、clear和vertical-align属性将无效。下面分别介绍弹性布局在容器上设置的六个属性。flex-directionflex-wrapflex-flowjustify-contentalign-contentalign-items1.flex-direction确定主轴的方向（容器默认有两个轴：水平主轴和垂直横轴，item沿默认为主轴）文档

效果图如下：设置flex-direction为rowin代码中，即主轴在水平方向，这也是flex-direction的默认值。flex-direction可以设置四个值。其他三个值对应效果图如下：flex-direction:row-reverse；弹性方向：列；flex-direction:column-reverse;2.flex-wrap定义了当一条轴线放不下时item如何换行，代码不会放行，直接在.flex-flow{}中添加flex-wrap属性即可以上代码，有3个值flex-wrap:nowrap;不换行，也是默认值flex-wrap:wrap;wraps，第一行在最上面，如果排不上去，继续到最下面flex-wrap:wrap-reverse;wraps，和wrap相反，第一行排在最下面，如果排不上去最上面很简单。3.flex-flow是flex-directionflex-wrap的缩写。默认是flex-flow:rownowrap，合并后的值为124.align-items定义item在横轴上如何对齐，或者放一小段代码

这段代码是在第一段代码的基础上增加6个item，和flex-itemclass一样全选是一个元素是2的倍数，设置高度为200px，并添加了align-items属性，align-items:flex-sta室温;横轴起点对齐效果如下：align-items:stretch;如果不设置item的高度，它会占据整个容器的高度，这也是align-items:flex-end这个属性的默认值；和横轴对齐终点align-items:center;与横轴的中点对齐align-items:baseline;与item中第一行文本的基线对齐，即最下面5.align-content定义了多轴的对齐方式，如果item只有一个轴，则该属性不会有任何作用。该属性有6个值，分别是：flex-start：与横轴起点对齐flex-end：与横轴终点对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。我不会把照片放在这里。看完上面几条应该就很容易理解了。别问我为什么，因为lazy6.justify-content定义了item在主轴上的对齐方式。该属性有5个值，分别是：flex-start：左对齐，也是默认值flex-end：右对齐center：居中space-between：两边对齐，item之间等间距。space-around：每个项目在两边等距。我不想展示效果图，因为我很懒。这里我只介绍弹性布局的容器的属性。以后可能会更多，也可能没有（笑脸）。哈哈哈，如有不足之处，欢迎指出，谢谢。

上一篇：uniappapp-pluspages.json-Framework

下一篇：恩探魔（ETM）项目周报（8.23-8.29）

灵活布局初步学习相关文章