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

RyanHoo 發布于2019-08-30 15:54 / 2234人閱讀

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

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

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

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

就沒每個

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

，例如7個

，那么是下面這樣的。

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

那么，用flex布局怎么做呢？有何優點？

效果是和上面一樣的

但是當我新增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簡單布局網站部署好了云服務器如何

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

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

移動端布局與適配

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

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

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

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

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

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

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

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