CSS Flex 弹性布局使用 / 四六文摘

原文地址:CSS Flex 弹性布局使用 | Stars-One的杂货小窝

前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客

重点记录

通过display:flex即可将div设置为flex布局

flex-direction是关于布局排列的方向,默认为row,flex-direction: column可以将flex布局纵向排列

flex布局可以通过align-item和justify-content设置元素对齐方式

默认flex布局是横向排列,align-item是对于y轴方向的对齐方式,justify-content是对于x轴的对齐方式

如果flex布局是纵向排列,则align-item是对于x轴方向的对齐方式,justify-content是对于y轴的对齐方式,与上面的相反

justify-content使用space-between即可让元素实现左右对齐的效果,使用space-around可以达到同样的效果,两者的不同为:space-around会在左右对齐后,会将间距进行平分且分给元素

flex:1 1 0% 自动占满

PS: 由于使用的是Uni-app开发,下面中的div是使用view标签

居中

以下都是横向排列的代码,关键属性为align-item和justify-content

水平居中

<!-- 水平居中 -->
<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;
}

CSS Flex 弹性布局使用