最近開(kāi)始學(xué)習(xí)uni-app茬射，其中頁(yè)面布局是很重要的一塊折晦，于是我從display開(kāi)始進(jìn)行研究货抄。在css的發(fā)展過(guò)程中display有幾十種寫法教沾，有興趣的同學(xué)可以參考這篇文章
https://www.cnblogs.com/gongyijie/p/8358836.html
彈性布局flex是目前使用很廣泛也很強(qiáng)大的布局方法之一蒲跨。
以下內(nèi)容我主要參考了這篇文章，有興趣的可以去看看
https://www.cnblogs.com/Webzhoushifa/p/9510856.html
這里有我轉(zhuǎn)載了一篇講解更詳細(xì)的flex文章
http://www.reibang.com/p/a5df93c89702
我們主要涉及到以下6個(gè)屬性
flex-direction 容器內(nèi)項(xiàng)目的排列方向(默認(rèn)橫向排列)
- row 橫向布局
- column 豎直布局
justify-content 項(xiàng)目在主軸上的對(duì)齊方式
- flex-start 主軸從開(kāi)始位置開(kāi)始排列
- flex-end 主軸從結(jié)束位置開(kāi)始排列
- center 主軸居中排列
- space-between 主軸兩頭對(duì)齊等間距排列
align-items 項(xiàng)目在交叉軸上如何對(duì)齊
- flex-start 交叉軸從開(kāi)始位置開(kāi)始排列
- flex-end 交叉軸從結(jié)束位置開(kāi)始排列
- center 交叉軸居中排列
- stretch 交叉軸拉伸鋪滿
flex-wrap 容器內(nèi)項(xiàng)目換行方式
- inherit 繼承父試圖的換行規(guī)則
- initial 初始的
- nowrap 不換行(默認(rèn))
- wrap 換行
- wrap-reverse 換行
flex-flow 是flex-direction和flex-wrap的簡(jiǎn)寫方式
align-content 定義了多根軸線的對(duì)齊方式授翻。如果項(xiàng)目只有一根軸線則不起作用
- flex-start 靠近開(kāi)始位置排列
- flex-end 靠近結(jié)束位置排列
- center 居中排列
- space-around 等間距排列(默認(rèn))
- space-between 兩頭對(duì)齊等間距排列
- inherit 集成父試圖的值
- initial 初始值
- stretch 拉伸鋪滿
一 或悲、flex-direction justify-content align-items配合使用
通過(guò)如下幾種場(chǎng)景來(lái)學(xué)習(xí)這三個(gè)屬性的用法。
1堪唐、默認(rèn)的布局
<template>
<view>
<view class="content">
<view class="a">block</view>
<view class="a">blockblock</view>
<view class="a">blockblockblock</view>
<view class="a">blockblock</view>
<view class="a">block</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 100upx;
background-color: #4CD964;
border: 1upx solid #FFFFFF;
}
</style>
display-default.jpg
2巡语、使用flex豎直布局靠左側(cè)對(duì)齊
<template>
<view>
<view class="content">
<view class="a">block</view>
<view class="a">blockblock</view>
<view class="a">blockblockblock</view>
<view class="a">blockblock</view>
<view class="a">block</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 100upx;
background-color: #4CD964;
border: 1upx solid #FFFFFF;
}
</style>
flex-01.jpg
3、主軸從結(jié)束為止排列淮菠，交叉軸居中排列
<template>
<view>
<view class="content">
<view class="a">block</view>
<view class="a">blockblock</view>
<view class="a">blockblockblock</view>
<view class="a">blockblock</view>
<view class="a">block</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 100upx;
background-color: #4CD964;
border: 1upx solid #FFFFFF;
}
</style>
flex-02.jpg
二男公、flex-wrap換行規(guī)則
1、默認(rèn)為不換行
<template>
<view>
<view class="content">
<view class="a">block-01</view>
<view class="a">block-02</view>
<view class="a">block-03</view>
<view class="a">block-04</view>
<view class="a">block-05</view>
<view class="a">block-06</view>
<view class="a">block-07</view>
<view class="a">block-08</view>
<view class="a">block-09</view>
<view class="a">block-10</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 18vh;
background-color: #4CD964;
border: 1vh solid #FFFFFF;
}
</style>
我們將flex-wrap設(shè)置為inherit和initial時(shí)顯示效果都是一樣的合陵，使用了默認(rèn)不換行的規(guī)則枢赔，父試圖也沒(méi)有單獨(dú)設(shè)置換行規(guī)則，那么也是使用默認(rèn)不換行的規(guī)則
flex-03.jpg
即使我們?cè)O(shè)置了高度拥知，但是還是被壓縮了
2踏拜、換行wrap
<template>
<view>
<view class="content">
<view class="a">block-01</view>
<view class="a">block-02</view>
<view class="a">block-03</view>
<view class="a">block-04</view>
<view class="a">block-05</view>
<view class="a">block-06</view>
<view class="a">block-07</view>
<view class="a">block-08</view>
<view class="a">block-09</view>
<view class="a">block-10</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 18vh;
background-color: #4CD964;
border: 1vh solid #FFFFFF;
}
</style>
flex-04.jpg
后面的元素被擠到了第二列
3、換行wrap-reverse
<template>
<view>
<view class="content">
<view class="a">block-01</view>
<view class="a">block-02</view>
<view class="a">block-03</view>
<view class="a">block-04</view>
<view class="a">block-05</view>
<view class="a">block-06</view>
<view class="a">block-07</view>
<view class="a">block-08</view>
<view class="a">block-09</view>
<view class="a">block-10</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap-reverse;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 18vh;
background-color: #4CD964;
border: 1vh solid #FFFFFF;
}
</style>
flex-05.jpg
前面的元素被擠到了第二列
三低剔、flex-flow
1执隧、默認(rèn)效果(inherit、initial户侥、space-around)
<template>
<view>
<view class="content">
<view class="a">block-01</view>
<view class="a">block-02</view>
<view class="a">block-03</view>
<view class="a">block-04</view>
<view class="a">block-05</view>
<view class="a">block-06</view>
<view class="a">block-07</view>
<view class="a">block-08</view>
<view class="a">block-09</view>
<view class="a">block-10</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-flow: column wrap-reverse;
justify-content: flex-start;
align-items: center;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 18vh;
background-color: #4CD964;
border: 1vh solid #FFFFFF;
}
</style>
這是一種簡(jiǎn)寫模式镀琉，同flex-05.jpg
四、align-content
1蕊唐、默認(rèn)效果(inherit屋摔、initial、space-around)
<template>
<view>
<view class="content">
<view class="a">block-01</view>
<view class="a">block-02</view>
<view class="a">block-03</view>
<view class="a">block-04</view>
<view class="a">block-05</view>
<view class="a">block-06</view>
<view class="a">block-07</view>
<view class="a">block-08</view>
<view class="a">block-09</view>
<view class="a">block-10</view>
<view class="a">block-11</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-flow: column wrap;
align-content: inherit;
justify-content: flex-start;
align-items: center;
background-color: #C8C7CC;
width: 100vw;
height: 100vh;
}
.a {
height: 18vh;
background-color: #4CD964;
border: 1vh solid #FFFFFF;
}
</style>
space-around.png
2替梨、flex-start
flex-start.png
3钓试、flex-end
flex-end.png
4、center
center.png
5副瀑、space-between
space-between.png
