原文地址: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 style="align-items: center;">
<view style="background-color: #007AFF;">內容</view>
</view>
水平垂直居中
<!-- 水平垂直居中 -->
<view 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 style="align-items: flex-start;">
<view style="background-color: #007AFF;">內容</view>
</view>
<!-- 垂直居底 -->
<view 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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/258013.html
標籤：其他