flex布局修改

一.设置弹性盒子

<view class="container">
<view class="boxOne">1</view>
<view class="boxTwo">2</view>
<view class="boxThree">3</view>
</view>

 二.开启弹性盒子：display: flex;

flex-direction: row ：设置主轴方向为从左到右的水平方向排列 

  flex-direction: row-reverse:主轴为从右到左的水平方向排列

flex-direction: column;主轴为从上到下的垂直方向排列

justify-content: 用于设置项目在主轴上的对齐方式 ，能够分配项目之间及其周围多余的空间

justify-content: flex-start: 默认值，表示项目对齐到主轴起点，项目间不留空隙

justify-content: flex-end：项目对齐到主轴终点，项目间不留空隙

justify-content: center：项目在主轴上居中排列，项目之间不留空隙，主轴起点离第一个项目起点距离和主轴终点到最后一个项目终点距离相等 

justify-content: space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半

justify-content: space-between：两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等

align-items: 设置项目在交叉轴上的对齐方式

align-items: center：项目在交叉轴的中间位置对齐

align-items: baseline：项目的第一行文字的基线对齐

align-items:flex-start：项目底部与交叉轴起点对齐

align-items: flex-end：项目底部与交叉轴终点对齐

设置新的弹性盒子

<view class="demo">
<view class="box">1</view>
<view class="box">2</view>
<view class="box">3</view>
<view class="box">4</view>
<view class="box">5</view>
<view class="box">6</view>
<view class="box">7</view>
<view class="box">8</view>
<view class="box">9</view>
</view>

 flex-wrap属性：用于规定是否允许换行,能设置多行排列时换行的方向

flex-wrap：wrap:当容器单行容不下所有项目时允许换行排列

flex-wrap-reverse:当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向

flex-wrap：nowrap: 默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩

align-items: center：文字部分居中

结构伪类选择器:nth-child() 作为父元素的第n个元素

.box:nth-child(5){
  background-color: red;
}

flex:决定弹性盒子中各个元素的占比（总面积进行分割，通过flex设置每个元素所占用比例

.boxA{
  width: 150rpx;
  height: 150rpx;
  background-color: green;
}

.boxB{
  width: 150rxp;
  height: 150rpx;
  background-color: greenyellow;
  flex: 2;
}

.boxC{
  width: 150rpx;
  height: 150rpx;
  background-color: red;
  flex: 1;
}

最终样式：