⼩程序之flex布局最详细讲解⼩程序 flex 布局快速⼊门
⼩程序 flex 布局实现
如果想要让某个空间实现 Flex 布局，必须要给它的⽗控件设置 flex 样式
⼀、view 默认布局
index.wxml
<view class="container">
<view class="s1"></view>
<view class="s2"></view>
<view class="s3"></view>
<view class="s4"></view>
</view>
index.wxss
.container{
/* display: flex; */
/* justify-content: space-evenly; */
/* align-items: center; */
}
.s1{
.s1{
width: 100px;
height: 100px;
background-color: aquamarine;
}
.s2{
width: 100px;
height: 100px;
background-color: rebeccapurple;
flex布局详细讲解}
.s3{
width: 100px;
height: 100px;
background-color: greenyellow;
}
.
s4{
width: 100px;
height: 100px;
background-color: red;
}
}
实现效果
1.1 flex 布局原理
flex 是 flexible Box 的缩写，意为“弹性布局”，⽤来为盒状模型提供最⼤的灵活性，任何容器都可以指定为 flex 布局当我们为⽗盒⼦设为 flex 布局以后，⼦元素的 float、clear 和 vertical-align 属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
采⽤ Flex 布局的元素，成为 Flex 容器（Flex container），简称容器，它的所有⼦元素⾃动成为容器成员，成为 Flex 项⽬（Item）
总：
通过给 ⽗容器添加 flex 属性，来控制⼦盒⼦的位置和排列⽅式
1.2 flex ⽗项常见属性
1. flex-direction ：设置主轴的⽅向
2. justify-content ：设置主轴上的⼦元素排列⽅式
3. flex-wrap ：设置⼦元素是否换⾏
4. align-content ：设置侧轴上的⼦元素的排列⽅式(多⾏)
5. align-items ：设置侧轴上的⼦元素排列⽅式(单⾏)
6. flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap
⼆、使⽤ flex 设置⽔平弹性布局
将上述的⽗容器 （container）属性 display属性 设置为 flex 布局
index.wxss
.container{
display: flex;
}
index.wxml 保持不变
2.1 Flex 布局的⽅向轴
Flex 布局有两根⽅向轴：⽔平的主轴 和 垂直的交叉轴Flex 布局默认是⽔平主轴的
2.1.1 ⽔平主轴布局 row （⽔平向右）
在 ⽗容器设置 flex-direction的值
1. flex-direction: row;（默认值）
2. flex-direction: row-reverse;（主轴反向）
2.1.2 垂直侧轴布局 column （⽔平向下）
1. flex-direction: column;（垂直⽅向）
2. flex-direction: column-reverse; （垂直反向）
2.2 Flex 中 justify-content 属性
这⾥把盒⼦的⼤⼩改⼀下，并且设置主轴为 row，如果想尝试多种效果的，可以⾃⾏修改主轴⽅向
.container{
display: flex;
flex-direction: row; // 设置默认的布局
}
.s1{
width: 50px;
height: 50px;
background-color: aquamarine;
}
.s2{
width: 50px;
height: 50px;
background-color: rebeccapurple;
}
.s3{
width: 50px;
height: 50px;
background-color: greenyellow;
}
.s4{
width: 50px;
height: 50px;
background-color: red;
}
2.2.1 flex-start 左居中布局
给 ⽗容器 justify-content 的属性设置 为 flex-start，因为⼩程序默认的也是 flex-start flex-start 和 inital 效果相似
.container{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
2.2.2 flex-end 右居中布局
.container{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
2.2.3 center ⽔平居中布局

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