综合教程

微信小程序flex box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

时间:2019/1/6 10:36:10  作者:互联网  来源:网络转载  查看:56358  评论:0
内容摘要:基础语法justify-content属性定义了项目在主轴上的对齐方式。(左中右).box {justify-content: flex-start | flex-end | center | space-between | space-around; } {C}u  ...

基础语法

justify-content属性定义了项目在主轴上的对齐方式。(左中右)

微信小程序flex_box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)
.box {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

{C}u  {C}flex-start(默认值):左对齐

{C}u  {C}flex-end:右对齐

{C}u  {C}center 居中

{C}u  {C}space-between:两端对齐,项目之间的间隔都相等。

{C}u  {C}space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。



小程序应用

justify-content: flex-start

效果如图
微信小程序flex_box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

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

效果如图

微信小程序flex_box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

wxml代码沿用上小节
Wxss代码

.zong{

  display: flex;

  justify-content:  flex-end;

  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/

}

 

justify-content: center

效果如图

微信小程序flex_box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

wxml代码沿用上小节
Wxss代码

.zong{

  display: flex;

  justify-content:  center;

  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/

}

justify-content: space-between

效果如图
微信小程序flex_box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

wxml代码沿用上小节
Wxss代码

.zong{

  display: flex;

  justify-content:  space-between;

  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/

}

 

 

justify-content: space-around

效果如图

微信小程序flex_box界面设计入门到精通-05课-flex容器属性-justify-content内容对齐(水平对齐)

wxml代码沿用上小节

Wxss代码

.zong{

  display: flex;

  justify-content:  space-around;

  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/

}



欢迎大家支持我的视频课程:微信小程序样式Flex Box精通课程
https://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述


相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |