image 微信小程序flex_浅谈微信小程序中flex布局的使用

1.初始化我们的布局

.userContainer {

background-color: darkgreen;

width: 100%;

height: 100%;

}

.user-item {

background-color: red;

width: 120rpx;

height: 120rpx;

border: 1px solid black;

}

1

2

3

4

5

默认的显示效果如下:

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 元素的排列顺序

1

2

3

4

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;

}