小程序flex布局

index.wxml

  <view class='nav'>
    <view class='nav_item'>1</view>
    <view class='nav_item'>2</view>
    <view class='nav_item'>3</view>
    <view class='nav_item'>4</view>
  </view>

index.wxss样式

.nav{
  width:100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content:space-between;
  margin-top: 8px;
}
.nav_item{
  width:180rpx;
  height: 180rpx;
  border:1px solid green;
  }

主轴和交叉轴

xy.png flex.png

未使用flex布局

默认01.png

1、使用flex布局

display: flex;

flex布局.png

2、flex布局方式row行 column列

flex-direction: row;

使用flex布局后默认为行布局 row

flex布局.png

改为column布局后

默认01.png

3、flex行布局时，超出宽度时是否换行 wrap为换行 nowrap为不换行

flex-wrap: wrap;

使用 flex布局为行布局时，超出屏幕宽度时自动换行。

wrap.png

4、下面两句的缩写形式

flex-direction: row;
flex-wrap: wrap;

flex-flow: row nowrap;

justify-content 元素在主轴上的对齐方式

5、从左边对齐

justify-content: flex-start ;

6、从右边对齐

justify-content: flex-end;

flexend.png

7、主轴上两端对齐

justify-content:space-around;

spacearound.png

8、主轴上两端对齐，每一组的间隔一样的

justify-content:space-between;

spacebetween.png

Y轴上的顶端

align-items: flex-start;

Y轴上的底端

align-items:center;

Y轴上的底端

align-items: flex-end ;

Y轴上的底端

align-items:center;

如果没有设置具体高度时填充整个容器的高度

align-items: stretch;

文字对齐基准线

align-items: baseline;