移動端優先的flex三欄布局的使用方法

leon 發布于2019-08-23 13:52 / 3496人閱讀

摘要：目前移動端的布局也都是用。彈性盒或，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列對齊和分配空白空間。

felxbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的布局也都是用flexbox。這篇文章主要介紹了移動端優先的flex三欄布局的使用方法，感興趣的小伙伴們可以參考一下

默認情況下先顯示移動端，通過 @media 屬性適配屏幕變化

使用flexbox相關的CSS屬性

1.  display: flex; (父元素)
2.  flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出該如何顯示)
3.  flex: flex-grow flex-shrink flex-basis; (子元素, 子元素該如何分配空間)
4.  order: number; (子元素, 子元素的順序該如何排列)

重點

1.  在父元素上設置 display: flex 和 flex-wrap: wrap
2.  通過 flex 來調整子元素上的空間分配(擴展、收縮比例和伸縮基準值)
3.  通過 order 來調整子元素的顯示順序(把 .center 放在中間)

例子

CSS

`.box {`
`display``: flex;`
`flex-wrap: wrap;`
`text-align``:` `center``;`
`}`
}//歡迎加入全棧開發交流劃水交流圈：582735936
]//面向劃水1-3年前端人員
}   //幫助突破劃水瓶頸，提升思維能力
`.``center` `{`
`background-color``:` `#f00``;`
`flex:` `100%` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `100%` `1``;`
`}`
`.``left` `{`
`background-color``:` `#0f0``;`
`}`
`.``right` `{`
`background-color``:` `#00f``;`
`}`
`@media` `all` `and (``min-width``:` `400px``) {`
`.``left``, .``right` `{`
`flex:` `50%` `1``;`
`}`
`}`
`@media` `all` `and (``min-width``:` `800px``) {`
`.box {`
`flex-wrap:` `nowrap``;`
`}`
`.``center` `{`
`order:` `2``;`
`flex:` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `0` `0` `300px``;`
`}`
}//歡迎加入全棧開發交流劃水交流圈：582735936
]//面向劃水1-3年前端人員
}   //幫助突破劃水瓶頸，提升思維能力
`.``left` `{`
`order:` `1``;`
`}`
`.``right` `{`
`order:` `3``;`
`}`
`}`
 |

HTML

`<``div` `class``=``"box"``>`
`<``div` `class``=``"center"``>`

彈性盒子是 CSS3 的一種新的布局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

``
`<``div` `class``=``"left"``>left`
`<``div` `class``=``"right"``>right`
``

以上就是本文的全部內容，希望對大家的學習有所幫助，

云服務器 GPU云服務器移動端布局三欄布局 web移動端布局 html5 三欄布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99706.html

移動端優先的flex三欄布局的使用方法

摘要：目前移動端的布局也都是用。彈性盒或，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列對齊和分配空白空間。 felxbox布局是css3里新出的一個，它就是為了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的布局也都是用flexbox。這篇文章主要介紹了移動端優先...

y1chuan 2019-06-28 16:52 評論0 收藏0
移動端優先的flex三欄布局

摘要：彈性盒或，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列對齊和分配空白空間。默認情況下先顯示移動端，通過 @media 屬性適配屏幕變化使用flexbox相關的CSS屬性 display: flex; (父元素) flex-wrap: nowrap | wrap | ...

junbaor 2019-08-29 17:06 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：參考文章同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局實現的效果主要在中，和固定寬度，首先渲染，且自適應寬度。 ps: 參考文章 DotHide同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 評論0 收藏0
CSS布局說——可能是最全的

摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的。可以看到，浮動元素，其實對于布局來說，是特別危險的。前言現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...

hearaway 2019-08-30 15:53 評論0 收藏0