前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客 重点记录通过
flex布局可以通过 默认flex布局是横向排列, 如果flex布局是纵向排列,则 justify-content使用space-between即可让元素实现左右对齐的效果,使用space-around可以达到同样的效果,两者的不同为:space-around会在左右对齐后,会将间距进行平分且分给元素 flex:1 1 0% 自动占满 PS: 由于使用的是Uni-app开发,下面中的div是使用view标签 居中以下都是横向排列的代码,关键属性为 水平居中<!-- 水平居中 --> <view style="display: flex;justify-content: center;"> <view style="background-color: #007AFF;">内容</view> <view style="background-color: orange;">内容1</view> </view> 垂直居中<!-- 垂直居中 --> <view class="flex" style="align-items: center;"> <view style="background-color: #007AFF;">内容</view> </view> 水平垂直居中<!-- 水平垂直居中 --> <view class="flex" style="align-items: center;justify-content: center;"> <view style="background-color: #007AFF;">内容</view> </view> 左右对齐<!-- 左右对齐 --> <view style="display: flex;justify-content: space-between;"> <view style="background-color: #007AFF;">内容</view> <view style="background-color: orange;">内容1</view> </view> <!-- 左右平分内容,可扩展为平分布局 --> <view style="display: flex;"> <view style="background-color: #007AFF;flex: 1 1 0%;">内容</view> <view style="background-color: orange;flex: 1 1 0%;">内容1</view> </view> 上下对齐<!-- 垂直居顶 --> <view class="flex" style="align-items: flex-start;"> <view style="background-color: #007AFF;">内容</view> </view> <!-- 垂直居底 --> <view class="flex" style="align-items: flex-end;"> <view style="background-color: #007AFF;">内容</view> </view> 自己稍微封装一下常用的样式: .match_parent { flex: 1 1 0%; } .flex_left_right { display: flex; justify-content: space-between; } .flex { display: flex } .flex-center{ display: flex; align-items: center; } |
|