1.初始化我们的布局
.userContainer {
background-color: darkgreen;
width: 100%;
height: 100%;
}
.user-item {
background-color: red;
width: 120rpx;
height: 120rpx;
border: 1px solid black;
}
<!--pages/user/user.wxml-->
<view class="userContainer">
<view class="user-item">1</view>
<view class="user-item">2</view>
<view class="user-item">3</view>
<view class="user-item">4</view>
<view class="user-item">5</view>
</view>
默认的显示效果如下:
image.png
2.现在我们使用flex布局:
.userContainer {
background-color: darkgreen;
width: 100%;
height: 100%;
display: flex;
}
image.png
flex容器的属性
flex-direction的使用(决定元素的排列方向):
flex-direction共有四个值,分别为row,row-reverse,column,column-reverse.其中row为默认值.
-
row-reverse:
row-reverse.png -
column:
column.png -
column-reverse:
column-reverse.png
flex-wrap(决定元素在排列不下的时候如何换行):
共有3个常用值,nowrap,wrap, wrap-reverse.其中nowrap为默认值.
-
nowrap,元素放不下时会被强行拉伸:
image.png -
wrap,元素排列不下,自动换行:
image.png - wrap-reverse,反向排列:
image.png
flex-flow是flex-direction和flex-wrap的合写:
flex-flow: row wrap;
justify-content(决定元素在主轴的对齐方式):
共有6个常用属性,flex-start,flex-end,center,space-between,space-around,space-evently.其中,flex-start为默认值:
-
flex-start:
image.png -
flex-end:
image.png -
center:
image.png -
space-between:
image.png -
space-around:
image.png -
space-evenly:
image.png
align-items(元素在侧轴的对齐方式):
共有5种常用属性,stretch,center,flex-start,flex-end,baseline.其中stretch为默认属性.
-
stretch(如果只是指定宽度,而没有指定高度):
image.png -
flex-start(指定了宽高):
image.png flex-end(指定了宽高):
image.png
- baseline(子元素中首行文字对齐):
image.png
flex 元素属性的使用
flex-grow(当有多余空间时,元素的放大比例)
默认值为0,表示不会扩大.设置的其他值表示 该元素占据所剩下空间的比例
.user-item {
background-color: red;
width: 100rpx;
height: 100rpx;
border: 1px solid black;
flex-grow: 1;
}
.tree {
display: flex;
align-items: flex-end;
flex-grow: 2;
}
image.png
flex-shrink(当空间不足时,元素的缩放比例)
默认是1,表示当空间不足时,默认等比缩小.如果想让其中某个元素不缩小,那么可以将其值更改为0.
.user-item {
background-color: red;
width: 250rpx;
height: 250rpx;
border: 1px solid black;
/* 默认按比例缩放 */
flex-shrink: 1;
}
.tree {
display: flex;
align-items: flex-end;
/* 不缩小该元素 */
flex-shrink: 0;
}
image.png
flex-basis(元素在主轴上占据的空间)
.user-item {
background-color: red;
width: 200rpx;
height: 200rpx;
border: 1px solid black;
}
.tree {
display: flex;
align-items: flex-end;
flex-basis: 300rpx;
}
image.png
flex是grow shink basis的简写
.user-item {
background-color: red;
width: 200rpx;
height: 200rpx;
border: 1px solid black;
/* 80会覆盖掉width的200 */
flex: 0 1 80rpx;
}
image.png
order 元素的排列顺序
<view class="userContainer">
<view class="user-item" style="order: 3">1</view>
<view class="user-item" style="order: 4">2</view>
<view class="user-item three" style="order: 1">3</view>
<view class="user-item" style="order: 2">4</view>
</view>
image.png
align-self(设置自身的对齐方式)
.user-item {
background-color: red;
width: 200rpx;
height: 200rpx;
border: 1px solid black;
/* 设置自身的对齐方式*/
align-self: flex-end;
}
.three {
display: flex;
align-items: flex-end;
/* 设置自身的对齐方式*/
align-self: center;
}
