Flex布局的基本使用总结

Flex布局的基本使用总结

flex布局是微信小程序开发推荐使用的布局样式，更易上手和学习。你可以从阮一峰的博客中系统学习到Flex布局，下面是我自己学习上手的记录总结。

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>

默认的显示效果如下:

2.现在我们使用flex布局:

.userContainer {
    background-color: darkgreen;
    width: 100%;
    height: 100%;
    display: flex;
}

flex容器的属性

flex-direction的使用(决定元素的排列方向):

flex-direction共有四个值,分别为row,row-reverse,column,column-reverse.其中row为默认值.

row-reverse:

column:

column-reverse:

flex-wrap

flex-wrap决定元素在排列不下的时候如何换行。共有3个常用值,nowrap,wrap, wrap-reverse.其中nowrap为默认值.

nowrap,元素放不下时会被强行拉伸:

wrap,元素排列不下,自动换行:

wrap-reverse,反向排列:

flex-flow

flex-flow是flex-direction和flex-wrap的合写:

flex-flow: row wrap;

justify-content

justify-content决定元素在主轴的对齐方式。共有6个常用属性,flex-start,flex-end,center,space-between,space-around,space-evently.其中,flex-start为默认值:

flex-start:

flex-end:

center:

space-between:

space-around:

space-evenly:

align-items

align-items表示元素在侧轴的对齐方式。共有5种常用属性,stretch,center,flex-start,flex-end,baseline.其中stretch为默认属性.

stretch(如果只是指定宽度,而没有指定高度):

flex-start(指定了宽高):

flex-end(指定了宽高):

baseline(子元素中首行文字对齐):

flex 元素属性的使用

flex-grow

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

flex-shrink

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

flex-basis

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

flex是grow shink basis的简写

.user-item {
    background-color: red;
    width: 200rpx;
    height: 200rpx;
    border: 1px solid black;
    /* 80会覆盖掉width的200 */
    flex: 0 1 80rpx;
}

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>

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

总结

主轴与交叉轴内容的对比

//主轴
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
//交叉轴
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

多根轴线对齐方式

//只有一根轴线，则该属性不起作用
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
//(1 1 auto) 有剩余空间则放大；空间不足则缩小；保持项目的本来大小；
  flex: auto; 
}


.item {
//(0 0 auto) 有剩余空间也不放大；空间不足也不缩小；保持项目的本来大小；
  flex: none; 
}