微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)

justify-content内容对齐

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/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内容对齐(左中右)相关推荐

微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐语法 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 西方语言都是从左向右读,所有 text-align 的默认值是 left.文 ...
视频教程-30小时微信小程序从入门到精通课程-基础篇-微信开发
30小时微信小程序从入门到精通课程-基础篇 8年IT开发经验,6年IT教育经验,喜欢把复杂逻辑用简单的表述传达给学生,传授编程知识,讲述生活故事曹圣捷 ¥12.00 立即订阅扫码下载「CSDN程序 ...
[免费分享]微信小程序从入门到精通视频教程 [8.2G]
获取方式公众号回复 wechat0423 获取下载地址, 好书推荐.视频分享,与您一起进步目录:/微信小程序从入门到精通视频教程 [8.2G] ┣━━课件资料demo [7.7M]┃ ┣━━表单组 ...
视频教程-【三月】微信小程序云开发项目实战课程 - T3租机械-微信开发
[三月]微信小程序云开发项目实战课程 - T3租机械宁夏酷申科技有限公司技术总监,计算机专业毕业后一直从事技术开发和架构工作袁永刚 ¥366.00 立即订阅扫码下载「CSDN程序员学院APP」, ...
HTML微信小程序的页眉代码,微信小程序样式wxss各种问题总结（不断更新）
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
微信小程序从入门到精通（二）小程序的能力
前言上一篇blog介绍了小程序的一些基础概念和代码构成以及主要的几个文件类型( 微信小程序从入门到精通(一) 基础知识与代码构成),那么本篇blog就继续围绕官方的简易教程以及QuickStart项 ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序测试用例模板_微信小程序样式：高质量小程序样式模板大全
新手想要制作出美观的小程序,你需要多参考一些好看的微信小程序样式.今天就带大家分析几个高质量小程序的样式,看看别是怎么把小程序做得美观又吸引人的: 1.电商小程序样式电商小程序首页一般是按照&quo ...
微信小程序样式 WXSS
微信小程序样式 WXSS 样式基础尺寸单位样式导入内联样式选择器 less语法样式基础类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示. WXSS 具有 CSS ...

微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)

微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)相关推荐

最新文章

热门文章