關于CSS3 flex布局，這樣簡單做就好了。

RyanHoo 發(fā)布于2019-08-30 15:54 / 2229人閱讀

摘要：布局在移動端會用得比較廣泛，例如導航欄，菜單欄等，以支付寶，淘寶為例。看了網(wǎng)上很多關于布局，有些寫得太亂了，也太復雜了。那么用布局，就是這樣布局上面給每個用劃分，一共分份，占，那就是占，那就是這個容易理解吧。

flex布局在移動端會用得比較廣泛，例如導航欄，菜單欄等，以支付寶，淘寶APP為例。

看了網(wǎng)上很多關于flex布局，有些寫得太亂了，也太復雜了。

寫一個導航欄，5個導航，用普通得寫法是。

就沒每個

按照20%平均分，左浮動即可。這種方法是可以實現(xiàn)得，但后面再增加

，例如7個

，那么是下面這樣的。

很明顯父級元素放不下了，只能被擠下去了。

那么，用flex布局怎么做呢？有何優(yōu)點？

效果是和上面一樣的

但是當我新增7-10個，都不會被擠下去，而是直接在父級元素上面進行排列并重新劃分寬度。

如果要加一個margin-right呢？這個也容易啊，但是最后一個

不貼邊，我們要給最后一個

多帶帶加一個style。

下面再說一個不均等的。

如上圖，有三個

，每個

都是不均等的，在父級元素用普通的方法就是給不同的百分比。那么用flex布局，就是這樣：




    Flex布局
    
    



1
2
3

上面給每個

用flex劃分，一共分6份，li_1占1/6，那就是flex:1;li_2占2/6，那就是flex:2;這個容易理解吧。

下面接著說水平排列方式：

在父級元素使用justify-content

justify-content：space-around;/*左右平均分布*/
justify-content：center;/*居中*/
justify-content：space-between;/*兩端分布*/
justify-content：flex-start;/*居左*/
justify-content：flex-end;/*居右*/

Author：TANKING
學習交流微信：face6009
web：http://likeyunba.com

云服務器 GPU云服務器就好了 flex布局 html簡單布局網(wǎng)站部署好了云服務器如何

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117078.html

移動端布局與適配

摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
css進階

摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關。但是不會受到包含塊的限制，可能會溢出。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由...

import. 2019-08-29 14:07 評論0 收藏0
CSS實現(xiàn)水平垂直居中的1010種方式（史上最全）

摘要：劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了要實現(xiàn)上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下實現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個倉庫，歡迎大家僅居中元素定寬高適劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

YuboonaZhang 2019-08-29 16:45 評論0 收藏0
CSS實現(xiàn)水平垂直居中的1010種方式（史上最全）

摘要：劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了要實現(xiàn)上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下實現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個倉庫，歡迎大家僅居中元素定寬高適劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

OnlyLing 2019-08-23 11:58 評論0 收藏0