justify-content内容对齐
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn/topic/huangjuhua
基础语法
justify-content属性定义了项目在主轴上的对齐方式。(左中右)
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
小程序应用
justify-content: flex-start
效果如图
Wxml代码
<view class='zong'>
<view class='fangxing'>
<text>01</text>
</view>
<view class='fangxing'>
<text>02</text>
</view>
</view>
Wxss代码
/* */
.zong{
display: flex;
justify-content: flex-start;
/*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}
.fangxing{
width: 100px; height: 100px;
background-color: beige;
}
justify-content: flex-end
效果如图
wxml代码沿用上小节
Wxss代码
.zong{
display: flex;
justify-content: flex-end;
/*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}
justify-content: center
效果如图
wxml代码沿用上小节
Wxss代码
.zong{
display: flex;
justify-content: center;
/*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}
justify-content: space-between
效果如图
wxml代码沿用上小节
Wxss代码
.zong{
display: flex;
justify-content: space-between;
/*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}
justify-content: space-around
效果如图
wxml代码沿用上小节
Wxss代码
.zong{
display: flex;
justify-content: space-around;
/*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}
欢迎大家收看我的视频教程:微信小程序界面设计布局Flex Box精通课程 (微信小程序界面设计必备技能)
更多推荐
微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)
发布评论