位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 内容水平对齐(justify-content)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: flex-flow属性 下一篇: 垂直对齐(align-items)

justify-content属性定义了项目在主轴上的对齐方式。示意图如7-16所示。

image.png

代码示例

小白教程网www.2d5.net

如下:

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

n  flex-start(默认值):左对齐

n  flex-end:右对齐

n  center 居中

n  space-between:两端对齐,项目之间的间隔都相等。

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

1.justify-content: flex-start

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下

.

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;
}

效果如图7-17所示。

image.png



2.justify-content: flex-end

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content:  flex-end;
  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}

效果如图7-18所示

image.png



3.justify-content: center

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content:  center;
  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}

效果如图7-19所示

image.png



4.justify-content: space-between

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content:  space-between;
  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}

效果如图7-20所示

image.png


5.justify-content: space-around

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.zong{
  display: flex;
  justify-content:  space-around;
  /*flex-start是默认值:flex-start|flex-end|center|space-between|space-around*/
}

效果如图7-21所示

image.png



上一篇: flex-flow属性 下一篇: 垂直对齐(align-items)
毕业设计网             广告联系QQ:45157718(微信同号)