⼩程序flex布局讲解
flex布局：
flex 布局是继 标准流布局 、 浮动布局 、 定位布局 后的第四种布局⽅式。这种⽅式可以⾮常优雅的实现⼦元素居中或
均匀分布，甚⾄可以随着窗⼝缩放⾃动适应。 flex 布局在浏览器中存在⼀定的兼容性（具体参
考： /zh-
CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7）。但是在⼩程序中，是完全兼容 flex 布局的，并且官⽅也是推荐使⽤ flex 布局的。下⾯就来详细的讲
下 flex 布局。
⼀个⼩例⼦：
看以下代码：
<view class='outter'>
<view class='inner'>1</view>
<view class='inner'>2</view>
</view>
.outter{
display: flex;
justify-content: space-between;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
}
最后的效果图
基本概念：
1. 弹性容器：包含着弹性项⽬的⽗元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
2. 弹性项⽬(Flex item)：弹性容器的每个⼦元素都称为弹性项⽬。弹性容器直接包含的⽂本将被包覆成匿名弹性项⽬。也可以称为⼦容器。
3. 轴(Axis)：每个弹性框布局包含两个轴。弹性项⽬沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
4. ⽅向(Direction)：可以通过 flex-direction 来确定主轴和侧轴的⽅向。
设置在主轴上的排列⽅式：
默认情况下，主轴的⽅向是从左到右。在主轴⽅向上，可以通过 justify-content 属性来设置他们的排列⽅式。排列⽅式有以下⼏种：
1.flex-start ：项⽬靠近⽗盒⼦的左侧。默认采⽤的就是这种排列⽅式。⽰例图如下：
2. flex-end ：项⽬靠近⽗盒⼦的右侧
3. center ：所有项⽬会挨在⼀起在⽗盒⼦的中间位置
4. space-around ：项⽬沿主轴均匀分布，位于⾸尾两端的⼦容器到⽗容器的距离是⼦容器间距的⼀半
5. space-between ：项⽬沿主轴均匀分布，位于⾸尾两端的⼦容器与⽗容器紧紧挨着
6. space-evenly ：项⽬在主轴上均匀分布，收尾两端的⾃容器到⽗容器的距离跟⾃容器间的间距是⼀样的
设置在侧轴上的排列⽅式：
默认情况下，侧轴的⽅向是从上到下。在侧轴⽅向上，可以通过 align-items 属性来设置他们的排列⽅式。排列⽅式有以下⼏种：
1. flex-start ：起始端对齐。默认就是这种对齐⽅式
2. flex-end ：末尾段对齐
3. center ：中间对齐
4. stretch ：如果项⽬没有设置⾼度。那么⼦容器沿交叉轴⽅向的尺⼨拉伸⾄与⽗容器⼀致。⽐如我们
将 .inner 的⾼度属性去掉，代码如下：
.outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
}
效果图为：
5. baseline ：基线对齐，这⾥的 baseline 默认是指⾸⾏⽂字，所有⼦容器向基线对齐，交叉轴起点到元素基线
距离最⼤的⼦容器将会与交叉轴起始端相切以确定基线。⽐如我们把代码改成如下：
<view class='outter'>
<view class='inner'>
<view style='margin-top:10px;background:#eee;'>hello</view>
</view>
<view class='inner'>2</view>
</view>
然后 wxss ⽂件为：
.outter{
display: flex;
align-items: baseline;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{...}
那么效果图为：
更换主轴和侧轴⽅向
主轴默认的⽅向是从左到右，侧轴的⽅向默认是从上到下，当然也可以进⾏修改。可以通过 flex-direction 进⾏修改。可以修改的参数为以下：1. row ：默认属性。从左到右
2. row-reverse ：从右到左
3. column ：从上到下
4. column-reverse ：从下到上
换⾏
默认情况下，元素个数如果超过⼀定数量，那么在⼀⾏当中就排列不下。此时 flex 默认的处理⽅式是压缩元素，使其能在⼀⾏中排列下来。⽐如以下代码：
<view class='outter'>
html的flex布局
<view class='inner'>1</view>
<view class='inner'>2</view>
<view class='inner'>3</view>
<view class='inner'>4</view>
</view>
.outter{
display: flex;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
那么会把这四个元素挤压在⼀⾏中。即使给元素设置了宽度也没有⽤的。效果图如下：
可以通过 flex-wrap 来改变排列的⽅式。可以设置的属性如下：
1. nowrap ：不换⾏。默认的
2. wrap ：换⾏
3. wrap-reverse ：换⾏，但是第⼀⾏会在下⾯
align-content属性
在排列中，如果有多⾏，那么这个属性是设置多⾏之间的排列⽅式。可以通过 align-content 属性来确定排列的⽅式。可以设置以下值1. flex-start ：从上往下排列。⽰例代码如下：
.outter{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 300px;
height: 300px;
background: pink;
}
2. flex-end ：末尾段对齐。效果图如下：
3. center ：中点对齐。效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。