今天学习了flex布局基础
1.flex容器和元素
下面这是一张flex容器的布局图,有助于大家理解:
图中的黄色小方框item1和item2 就是flex元素
2.flex容器属性
flex-direction决定了元素的方向
flex-wrap决定元素如何换行(排列不下时)
flex-flow是flex-direction和flex-wrap的简写
justify-content元素在主轴上的对其方式
align-iems元素在交叉轴的对齐方式
flex-grow当有多余空间时,元素的放大比例
flex-shrink当空间不足时,元素的缩小比例
flex-basis元素在主轴上占据的空间
flex是grow、shrink、basis的简写
align-self定义元素自身的对齐方式
举例:
首先我们选择一个页面设置一个简单的布局
这是默认下的排列方式,我们再使用flex布局
(1)flex-direction
我们可以通过改变它的属性,来改变它的排列方向。
(2)flex-wrap
我们先增加页面的元素,再来试试flex-wrap如何换行
代码如下:编译后,我们发现排列不下的元素,排到了第二行
还有一种是 wrap-reverse,这种排列方式其实是上一种的反转
(3) justify-content
center属性
flex-start
(4)align-items
属性是flex-end时
3.相对定位和绝对定位
相对定位的元素是相对自身进行定位,参照物是自己。
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
今天就学习了这些。
微信小程序flex布局基础
最新推荐文章于 2024-05-09 09:19:22 发布