学习目标:
·了解盒子模型的基本原理
·掌握浮动于定位
·熟练掌握flex布局方式
3.页面布局
3.1盒子模型
模型结构
模型元素
3.2块级元素与行内块元素
3.2.1块级元素
wxml代码：
<view style="border: 1px solid #f00;">块级元素1</view>
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;">
<view style="height: 60px;">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">
父级元素高度随内容决定，内容为文本</view>运行结果
3.2.2行内元素
wxml代码
<view style="padding: 20px">
<text style="border: 1px solid #f00;">行内元素1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px">行内元素2</text>
<text style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</text>一行显示不全，自动换行显示
</view>
3.2.3行内块元素
wxml代码
<view>
元素显示方式的<view style="display:inline-block;border: 1px solid #f00;margin: 10px;padding: 10px; width: 200px">块级元素、行内元素和行内块元素</view>三种类型。
</view>运行结果 
3.3浮动与定位
3.3.1元素浮动与清除
1.浮动格式：
{float:none|left|right;}wxml代码
<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0">box1</view>
<view style="float: left;border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3 左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0">box1</view>
<view style="float: left;border: 1px solid #0f0">box2</view>
<view style="float: left;border: 1px solid #0f0">box3</view>
</view>运行结果
2.清除格式：
{clear:left|right|both|none}wxml代码
<view>box1 box2 左浮动 box3 清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0">box1</view>
<view style="float: left;border: 1px solid #0f0">box2</view>
<view style="clear: left;border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px;"clear="clear-float">
<view style="float: left;border: 1px solid #0f0">box1</view>
<view style="float: left;border: 1px solid #0f0">box2</view>
<view style="float: left;border: 1px solid #0f0">box3</view>
</view>运行结果
3.3.2元素定位
格式：
{position:static|relative|absolute|fixed}wxml代码
<!--三个元素未定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
<!--box2绝对定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
<!--box2相对定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
<!--box2固定定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>运行结果
3.4flex布局
3.4.1容器属性
1. display
display 用来指定元素是否为 flex 布局，语法格式为：
. box|display: flex linline-flex;}
其中，flex-块级 flex 布局，该元素变为弹性盒子；
inline-flex-行内 flex 布局，行内容器符合行内元素的特征，同时在容器内又符合 flex 布局规范。
设置了 flex 布局之后，子元素的 float、clear 和 vertical-align 属性将失效。
2. flex-direction
flex-direction 用于设置主轴的方向，即项目排列的方向，语法格式为：
. box{flex-direction: row |row-reverse lcolumn lcolumn-reverse;微信小程序开发与运营其中，row
row-reverse-主轴为水平方向，起点在右端；
column-主轴为垂直方向，起点在顶端；
column-reverse-主轴为垂直方向，起点在底端。
以下为元素在不同主轴方向下的显示效果。
3. flex-wrap
fles-wrap 用来指定当项目在一根轴线的排列位置不够时,项目是否换行,其语法格式 box|flex-wrap: nowrap wrap wrap wrap - reverse 其中, nowrap--不换行,默认值;
wrap--换行,第一行在上方;
wrap-reverse--换行,第一行在下方。
当设置换行时,还需要设置 align-item 属性来配合自动换行,但 align-item 的值"stretch"。
flex-wrap 不同值的显示效果如下图所示
4. flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写形式,默认值为 row nowap。语法格式如下:
box|flex-flow:<flex-direction>||<flex-wrap>;
示例代码如下:
. box|flex-flow; row nowrap;|//水平方向不换行 box|flex-flow: row: row-reverse wrap;//水平方向逆方向换行 box|flex-flow; column wrap-reverse;|//垂直方向逆方向换行
5. justify-content
justify-content 用于定义项目在主轴上的对齐方式。语法格式如下下:
box|justify-content: flex-start|flex-end |cend|certer Ispace-between Ispace-around;}
其中, justify-content--与主轴方向有关,默认主轴水平对齐,方向从左到右;
flex-start-左对齐,默认值;
flex-end--右对齐;
center--居中;
space-between--两端对齐,项目之间的间隔都相等;
space-around--每个项目两侧的间隔相等。
下图所示为 justify-content 不同值的显示效果。
6. align-items
align - items 用于指定项目在交叉轴上的对齐方式，语法格式如下
boxlalign-items: flex -start Iflex - end icenter Ibaseline Istretch.
其中，align-items——与交叉轴方向有关，默认交叉由上到下；
flex-start——交叉轴起点对齐；
flex-end——交叉轴终点对齐；
center——交叉轴中线对齐；
baseline——项目根据它们第一行文字的基线对齐；
stretch——如果项目未设置高度或设置为 auto，项目将在交叉轴方向拉伸填充容器，白为默认值。
示例代码如下：
//. wxm1
<view class = "cont1"><view class="item">1</view><view class="item item2">2 </view><view class="item item3">3</view><view class = "item item4">4</view></view>//WXSS . cont1
display: flex;
flex-direction: row;
align-items: baseline;
-
. item
background-color:#ccc;
border:1px solid #f00;
height:100px;
width:50px;
margin:2px;
. item2{
height:80px;
}
. item3{
display: flex;
height:50px;
align -items: flex -end;
}
. item4{
height:120px;
}
7. align-content
align-content 用来定义项目有多根轴线 (出现换行后) 在交叉轴上的对齐方式,如果只有一根轴线,该属性不起作用。语法格式如下:
box|align-content; flex-start|flex-end|center|space-between space-around |stretch|
其中, space-between--与交叉轴两端对齐,轴线之间的间隔平均分布;
space-around--每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框间隔大一倍。
其余各属性值的含义与 align-items 属性的含义相同。
下图所示为 align-content 不同值的显示效果。
3.4.2项目属性
容器内的项目支持6个属性，其名称和功能如下表所示
1.order
order属性定义项目的排列顺序，数值越小，排名越靠前，默认值为0。语法格式如下:
.item{order:<number>;}
示例代码如下:
<view class ="cont1">
<view class ="item">1</view><view class ="item ">2</view><view class ="item ">3<view><view class ="item ">4</view><view
<view class ="cont1">
<view class ="item"style ="order:1">1</view><view class ="item"style ="order:3">2</view><view class ="item"style="order:2">3</view><view class ="item">4<view>
</view>2. flex-grow
flex-grow 定义项目的放大比例，默认值为 0，即不放大。语法格式如下：
. item{flex-grow:<number>;}示例代码如下：
<view class= "cont1">
<view class="item" >1</view><view class="item">2</view><view class="item">3 </view><view class="item">4</view></view>
<view class="cont1">
<view class="item" >1</view>
<view class = "item" style="flex-grow:1">2</view><view class ="item" style="flex-grow:2">3</view><view class="item">4</view>
</view>3.flex-shrink
.item{flex-shrink:<number>;}<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item" style="order:3" style="flex-shrink:2">2</view>
<view class="item" style="order:2" style="flex-shrink:1">3</view>
<view class="item" style="order:2" style="flex-shrink:4">4</view>
</view>4.flex-basis
.item{flex-basis:<number>|auto;}<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item" style="order:3" style="flex-basis:100px">2</view>
<view class="item" style="order:2" style="flex-basis:200px">3</view>
<view class="item">4</view>
</view>5.flex
语法格式：
.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}
6.align-self
语法格式：
.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}
扫一扫
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
