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

版权声明:摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86177239

justify-content内容对齐
基础语法
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

效果如图
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
效果如图
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
效果如图
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精通课程

猜你喜欢

转载自blog.csdn.net/u013818205/article/details/86177239
0条评论
添加一条新回复