flex布局快速成型（原創）

阿新 • • 發佈：2018-06-11

footer 細節 gre space auto img In alt pre

技術分享圖片

最近我根據一個UI設計，耗時3h快速實現較復雜頁面布局，如上圖。根據這份UI設計圖，實現代碼如下，暫不考慮具體細節，先以成型為主：

<!DOCTYPE html>
<html>

<style type="text/css">

*{
    padding: 0;
    margin: 0;
    font-size: 62.5%;

    
}

li{
    list-style:none
}

html{
    height:100%;
}

body{
    height:100%;
}


</style>

< 
head>
    <title>點餐頁</title>
</head>
<body>

    <header style="width:100%;height:14.28%;background:red"></header>
    <div style="width:100%;height:71.42%;display:flex;">

        <span style="width:85.72%;overflow-y: auto">

            <div style="display: flex;flex-direction:column;height: 50rem" 
>

                <span style="width: 100%;height:10%;background:black;margin: 0.5rem 0"></span>
                <ul style="width: 100%;background:pink;display: flex;flex-wrap:wrap;justify-content:space-between;">
                    
                    <li style="width: 30%;height: 20rem;margin: 1rem;display: flex;flex-direction: column" 
>
                        <span style="background:black ;height: 70%"></span>    
                        <span style="height:10%;background:black;margin: 1rem  0"></span>
                        <span style="height:15%;background:blue;display: flex;justify-content:space-between;align-items: center;">
                            <span style="font-size: 2rem">123</span>
                            <button style="width: 25%">+</button>
                        </span>
                    </li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>

                </span>

            </div>
            <div style="display: flex;flex-direction:column;height: 50rem">

                <span style="width: 100%;height:10%;background:green;margin: 0.5rem 0"></span>
                <ul style="width: 100%;background:pink;display: flex;flex-wrap:wrap;justify-content:space-between;">
                    
                    <li style="width: 30%;height: 20rem;margin: 1rem;display: flex;flex-direction: column">
                        <span style="background:black ;height: 70%"></span>    
                        <span style="height:10%;background:black;margin: 1rem  0"></span>
                        <span style="height:15%;background:blue;display: flex;justify-content:space-between;align-items: center;">
                            <span style="font-size: 2rem">123</span>
                            <button style="width: 25%">+</button>
                        </span>
                    </li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>


                </ul>

            </div>
            <div style="display: flex;flex-direction:column;height: 50rem">

                <span style="width: 100%;height:10%;background:green;margin: 0.5rem 0"></span>
                <ul style="width: 100%;background:pink;display: flex;flex-wrap:wrap;justify-content:space-between;">
                    
                    <li style="width: 30%;height: 20rem;margin: 1rem;display: flex;flex-direction: column">
                        <span style="background:black ;height: 70%"></span>    
                        <span style="height:10%;background:black;margin: 1rem  0"></span>
                        <span style="height:15%;background:blue;display: flex;justify-content:space-between;align-items: center;">
                            <span style="font-size: 2rem">123</span>
                            <button style="width: 25%">+</button>
                        </span>
                    </li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>
                    <li style="width: 30%;height: 20rem;background: black;margin: 1rem"></li>


                </ul>

            </div>

        </span>
        <span style="width:14.28%;background:blue"></div>

        </div>
        <footer style="width:100%;height:14.28%;display: flex">
            <span style="width: 75%;height: 100%">
                <div style="display: flex;height: 100%;flex-direction: column;">
                    <span style="height: 20%;background: green;width: 100%"></span>
                    <span style="height:80%;width: 100%">
                        <ul style="width: 100%;height: 100%;display: flex;flex-direction: row;overflow-x: auto;">
                            

                            <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                    <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                    <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                    <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                    <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                                    <li style="width: 10rem;height: 100%;display: flex;flex-direction: column;margin: 0 0.5rem;flex-shrink:0">
                                <span style="background:black ;height: 55%;width: 100%"></span>    
                                <span style="height:10%;background:black;margin-top: 0.3rem ;width: 100%">
                                    
                                </span>
                                <span style="height:10%;background:black;margin: 0.3rem  0;width: 100%">
                                    
                                </span>
                                <span style="height:15%;background:blue;width: 100%"></span>


                            </li>
                            

                        </ul>
                    </span>
                </div>
            </span>
            <span style="width: 25%">
                <div style="display: flex;flex-direction: column;height: 100%;">
                    <span style="height: 50%;background: black"></span>
                    <span style="height: 25%;background:blue"></span>
                    <span style="height: 25%;background: pink"></span>
                </div>
                
            </span>
            
        </footer>

    </body>
    </html>

效果如圖：

技術分享圖片

flex布局快速成型（原創）

footer 細節 gre space auto img In alt pre 最近我根據一個UI設計，耗時3h快速實現較復雜頁面布局，如上圖。根據這份UI設計圖，實現代碼如下，暫不考慮具體細節，先以成型為主： <!DOCTYPE html&g

布局管理器（一）

lin 其中 bottom tom left near frame 屬性 strong 1.LinearLayout（線性布局）讓所有的組件都成為單一的方向，即垂直的或者水平的（默認）。 android:layout_weight //該屬性控制水平和垂直方向

xml布局內容總結（四）--Android

odi utf lns data- state 常常使用查看 andro (1)對於xml編寫界面較復雜的情況下，使用include會使得編寫和查看更清楚 <LinearLayout android:layout_width=&

Boostrap 布局組件（二）

菜單 image blog ava nbsp log class cti 堆疊 1.Bootstrap 按鈕下拉菜單向按鈕添加下拉菜單，只需要簡單地在在一個 .btn-group 中放置按鈕和下拉菜單即可。您也可以使用 <span class="caret">

Boostrap 布局控件（四）

鼠標位置 dism ssa 導航 con mis small 創建 1.Bootstrap 徽章（Badges）徽章與標簽相似，主要的區別在於徽章的邊角更加圓滑。徽章（Badges）主要用於突出顯示新的或未讀的項。如需使用徽章，只需要把 <span class=

自己定義ViewGroup控件（二）----->流式布局進階（二）

avi ride sch get spec tracking htm out fst main.xml <?xml version="1.0" encoding="utf-8"?> <com.exa

Android 4.0 Launcher2源碼分析——主布局文件（轉）

not sch png 默認顯示效果 target ots eat col 本文來自http://blog.csdn.net/chenshaoyang0011 Android系統的一大特色是它擁有的桌面通知系統，不同於IOS的桌面管理，Android有一個桌面系統用於管

Jmeter源碼之Http請求布局樣式修改（三）

Jmeter修改點包括：協議、端口號、域名等界面：涉及的類：類：JLabeledTextField.java修改的代碼：Jmeter源碼之Http請求布局樣式修改（三）

樹布局算法（翻譯）

object cati 及其邏輯 minimal 很多分發中介輸出繪制可展現的樹比爾.米爾當我需要為某個項目繪制一些樹時，我認為繪制整齊樹木會有一個經典而簡單的算法。我發現的更有趣得多：樹布局不僅是一個NP完全問題1，但樹繪圖算法背後有一個漫長而有趣的歷史。我

Flex布局（引用阮一峰大神）

title set -c itl asset 遊戲 www 一個 sset Flex 布局教程：語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程：實例篇 http://www.rua

CSS3 Flex布局（項目）

target 縮小如果 height follow item 不足是否項目一、order屬性 order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。二、flex-grow屬性 flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間

css之flex布局（靈活盒子）

itl lee header pbo 靈活翻譯 ref .html lex 這裏純當自己的筆記，相看解釋的還是去鏈接吧打開了新世界的大門標記一下：中文，阮一峰的博客，語法：http://www.ruanyifeng.com/blog/2015/07/flex-gra

HTML學習筆記 css定位（靜態，相對，固定，絕對布局）偏移案例第十二節（原創）參考使用表

absolute write style 用戶學習 nbsp -c code posit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

重新總結flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

div 彈性布局水平 self sta between 拉伸 around spa 1、flex，主要就是按比例分配。（例如：兩個div的flex:1，就大小相等） .box1{ flex:1; background-color: red; } .box

flex布局（引用阮一峰老師的flex布局-語法篇）

元素 3.2 spa lin ear ner ros 剩余空間對齊方式一、Flex 布局是什麽？ Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局。 .box{ disp

「小程序JAVA實戰」小程序的flex布局（22）

imageview ner ever program 含義 contain 大小 -m clas 轉自：https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已經把小程序的框架說完了，接下來說說小程序的組件，在說組件之前

flex布局、grid布局（入門初體驗）

eas style 都是 str justify new 多行 ever template 兩種布局都可以極大簡化排版布局的步驟，都是直接作用於自己的排版（比如：現在 ul 上，ul>li 就會自動進行排版） flex布局：一般用於單行排版 display: fle

IOS布局筆記一（代碼實現自己主動布局）

tde tps space sina idt normal title 2014年 otto 1.將一個試圖放置在其父視圖的中央位置,使用限制條件。 2.創建兩個限制條件:一個是將目標視圖的 center.x 位置排列在其父視圖的 center.x 位置,而且另

三欄布局中間流動（固比固）的實現

middle 關系 bsp brush 重要 pre over div 布局 1.使用float屬性。 css: .left{ float:left; width:200px; height:100px; background:blue;} .mi

QT之布局管理器（十九）

QT 布局管理器水平垂直我們在之前的 GUI 開發中都是使用的是絕對定位，何謂絕對定位呢？就是我們直接在像素級指定各個組件的位置和大小。比如我們之前使用的 void QWidget::move(int x, int y)；void QWidget::resize(int

flex布局快速成型（原創）

相關推薦