微信小程序flex box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行_小程序教程_Flex Box教程

小程序教程: 微信小程序flex box界面设计入门到精通-03课-flex容器属性-flex-wrap项目换行
时间：2019/1/6 10:16:54  作者：互联网  来源：网络转载  查看：56623  评论：0
内容摘要：基础语法默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap（默认）：不换行wrap：换行，第一行...
基础语法

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

小程序应用

flex-wrap: nowrap
效果如图

我们沿用上章节的布局代码和样式代码
在我们容器的样式中增加代码

Wxss代码

.zong{

flex-wrap: nowrap /* nowrap默认值，可选属性值：nowrap|wrap|wrap-reverse */

}

flex-wrap: wrap
效果如图

在容器增加样式flex-wrap: wrap；完整代码如下：
Wxml代码

<view class='zong'>

   <view class='fangxing'>

    <text>01</text>

</view>

<view class='fangxing'>

    <text>02</text>

</view>

<view class='fangxing'>

    <text>03</text>

</view>

<view class='fangxing'>

    <text>04</text>

</view>

<view class='fangxing'>

    <text>05</text>

</view>

</view>

Wxss代码

/* */

.zong{

padding: 10px;

display: flex;

flex-direction: row ;/* row默认，属性值有row|row-reverse|column|column-reverse*/

flex-wrap: wrap; /* nowrap 默认，属性值有：nowrap | wrap | wrap-reverse */

}

.fangxing{

width: 100px; height: 100px;

background-color: beige;

margin: 10px;

}

flex-wrap: wrap-reverse
效果如图

我们只需更改上小节的容器样式，变更flex-wrap: wrap-reverse。
Wxss代码

.zong{

padding: 10px;

display: flex;

flex-direction: row ;/* row默认，属性值有row|row-reverse|column|column-reverse*/

flex-wrap: wrap-reverse; /* nowrap 默认，属性值有：nowrap | wrap | wrap-reverse */

}

欢迎大家支持我的视频课程:微信小程序样式Flex Box精通课程
https://ke.qq.com/course/368348?tuin=2bea1eb0

标签：微信小程序flex-wrap项目换行flex容器属性 flex box入门教程微信小程序flex box入门教程在线视频教程
上一篇：微信小程序flex box界面设计入门到精通-04课-flex容器属性-flex-flow属性
下一篇：微信小程序flex box界面设计入门到精通-02课-flex容器属性-flex-direction项目排列方向