【微信小程序】flex布局

在这里插入图片描述

🏆今日学习目标：flex布局
😃创作者：颜颜yan_
✨个人主页：颜颜yan_的个人主页
⏰预计时间：20分钟
🎉专栏系列：微信小程序开发

文章目录

前言
Flex布局
总结

前言

哈喽大家好，本期是微信小程序的第四期，本期主要内容：flex布局。
ps：本期有引用上期内容噢~

Flex布局

什么是flex？

Flex布局是W3C组织在2009年提出的一个新的布局方案，其宗旨是让页面的样式布局更加简单，并可以很好地支持响应式布局。
Flex也成为“弹性布局”，主要作用在容器上，它将页面中所有的元素都包裹起来。在上期文章中，我们使用display:flex;将view变成了一个弹性盒子。设置display:flex;是应用一切弹性布局属性的先决条件，如果不设置display:flex;，那么后续的其他相关弹性布局属性都将无效。

flex-direction属性

这个属性用来指定view内元素的排列方向。这个属性的值有4种，分别是：row、column、row-reverse、column-reverse。
在一个平面直角坐标系里，轴有两个方向，分别是水平方向和垂直方向。一个弹性盒子，需要确定一个主轴。这个主轴到底是水平方向还是垂直方向就由flex-direction来决定。如果flex-direction的值为row或者row-reverse，那么这个主轴就是水平方向；如果flex-direction的值为column或者column-reverse，那么这个主轴就是垂直方向。
选定主轴的方向后，另外一个方向的轴称为交叉轴。也就是说，主轴并不一定是水平方向，交叉轴并不一定是垂直方向，主轴的方向由flex-direction的值来决定。