2. 程式人生 > >Flex 佈局教程：例項篇(阮一峰)

Flex 佈局教程：例項篇(阮一峰)

阿新 • • 發佈：2019-01-07

上一篇文章介紹了Flex佈局的語法，今天介紹常見佈局的Flex寫法。

你會看到，不管是什麼佈局，Flex往往都可以幾行命令搞定。

一、骰子的佈局

骰子的一面，最多可以放置9個點。

下面，就來看看Flex如何實現，從1個點到9個點的佈局。你可以到codepen檢視Demo。

如果不加說明，本節的HTML模板一律如下。


<div class="box">
  <span class="item"></span>
</div>

上面程式碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex專案。如果有多個專案，就要新增多個span元素，以此類推。

1.1 單專案

首先，只有左上角1個點的情況。Flex佈局預設就是首行左對齊，所以一行程式碼就夠了。


.box {
  display: flex;
}

設定專案的對齊方式，就能實現居中對齊和右對齊。


.box {
  display: flex;
  justify-content: center;
}



.box {
  display: flex;
  justify-content: flex-end;
}

設定交叉軸對齊方式，可以垂直移動主軸。


.box {
  display:
 
 flex;
  align-items: center;
}



.box {
  display: flex;
  justify-content: center;
  align-items: center;
}



.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}



.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

1.2 雙專案


.box {
  display: flex;
  justify-content: space-between;
}



.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}



.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}



.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}



.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

1.3 三專案


.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

1.4 四專案


.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

HTML程式碼如下。


<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS程式碼如下。


.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

1.5 六專案


.box {
  display: flex
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Flex 佈局教程：例項篇(阮一峰)

     
 

上一篇文章介紹了Flex佈局的語法，今天介紹常見佈局的Flex寫法。

你會看到，不管是什麼佈局，Flex往往都可以幾行命令搞定。




一、骰子的佈局

骰子的一面，最多可以放置9個點。



下面，就來看看Flex如何實現，從1個點到9個點的佈局。你可以到codepen 



  
 

    


    
    
CSS-Flex 佈局教程：例項篇

     
  
 參考文章：Flex 佈局教程：例項篇 
 
一、骰子的佈局 
 
 骰子的一面，最多可以放置9個點。 
 


 
 

 
下面，就來看看Flex如何實現，從1個點到9個點的佈局。 


 
 

 
如果不加說明，本節的HTML模板一律如下。 
<div class="box">
  & 



  
 

    


    
    
css基礎精華---Flex 佈局教程：例項篇

     
 

上一篇文章介紹了Flex佈局的語法，今天介紹常見佈局的Flex寫法。

你會看到，不管是什麼佈局，Flex往往都可以幾行命令搞定。




一、骰子的佈局

骰子的一面，最多可以放置9個點。



下面，就來看看Flex如何實現，從1個點到9個點的佈局。你可以到codepen 



  
 

    


    
    
Flex 佈局教程：語法篇 作者： 阮一峰 日期： 2015年7月10日 網頁佈局（layout）是 CSS 的一個重點應用。  佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + po

     
 

網頁佈局（layout）是 CSS 的一個重點應用。



佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性
 + position屬性
 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。



2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡 



  
 

    


    
    
flex佈局教程：語法

     
 

網頁佈局（layout）是CSS的一個重點應用。



佈局的傳統解決方案，基於盒狀模型，依賴 display屬性
 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。



2009年，W3C提出了一種新的方案----Flex佈局，可以簡便、完整、響 



  
 

    


    
    
轉：阮一峰Flex 布局教程：實例篇

     
 side   web   figure   title   borde   無法   ref   .com   1.2   作者： 阮一峰
日期： 2015年7月14日

上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。
你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。

我只列 



  
 

    


    
    
Flex 布局教程：語法篇   作者： 阮一峰

     
 num   完全   tutorials   eight   項目   default   size   webkit   http   網頁布局（layout）是 CSS 的一個重點應用。

布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那 



  
 

    


    
    
Flex佈局教程 --- 例項篇

     
  
  
  
 一、骰子的佈局 
 骰子的一面，最多可以放置9個點。 
  
 下面，就來看看Flex如何實現，從1個點到9個點的佈局。你可以到codepen檢視Demo。 
  
 如果不加說明，本節的HTML模板一律如下。 
 
<div class="box">
  <span cl 



  
 

    


    
    
Flex 布局教程：語法篇

     
 https   stat   token   flow   tutorial   ble   布局   fault   contain   作者： 阮一峰

日期： 2015年7月10日


網頁布局（layout）是 CSS 的一個重點應用。

布局的傳統解決方案，基於盒狀模型，依賴 display 屬性  



  
 

    


    
    
Flex 布局教程：語法篇(摘抄，學習中)

     
 有關   之前   表示   技術   play   under   line   -c   內容   網頁布局（layout）是CSS的一個重點應用。

布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不 



  
 

    


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

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


.box{
  disp 



  
 

    


    
    
Flex佈局教程 --- 語法篇

     
  
  
  
 一、Flex 佈局是什麼？ 
 Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。 
 任何一個容器都可以指定為 Flex 佈局。 
 
.box{
  display: flex;
}
 
 行內元素也可以使用 Flex 佈局。 
 
.bo 



  
 

    


    
    
阮一峰：WebSocket 教程

     
  
  
  
 https://zhuanlan.zhihu.com/p/27604269 
 節選： 
 WebSocket 是一種網路通訊協議，很多高階功能都需要它。 
 本文介紹 WebSocket 協議的使用方法。 一、為什麼需要 WebSocket？ 
 初次接觸 WebSocket 的人，都會問 



  
 

    


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

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



  
 

    


    
    
Systemd入門教程：命令篇（轉）

     
 apache   完整   start   -o   一是   analyze   sudo   one   iso   作者： 阮一峰

日期： 2016年3月 7日


Systemd 是 Linux 系統工具，用來啟動守護進程，已成為大多數發行版的標準配置。


本文介紹它的基本用法，分 



  
 

    


    
    
Systemd入門教程：實戰篇（轉）

     
 現在   重啟   penssh   span   日誌   才會   查看   筆記本   dep   作者： 阮一峰
日期： 2016年3月 8日

上一篇文章，我介紹了 Systemd 的主要命令，今天介紹如何使用它完成一些基本的任務。


一、開機啟動
對於那些支持 Systemd 的軟 



  
 

    


    
    
阮一峰：為什麽要寫博客（轉）

     
 today   html   footer   pac   訪問   2018年   網站流量   ip訪問   組態    
2010年4月，我與百姓網CEO王建碩有過一次對話。我們談到了為什麽寫博客。 ?
 
阮：建碩，我知道你有兩個博客，一個是英文的，另一個是中文的。但是，你更新英文博客的頻率，遠遠高於 



  
 

    


    
    
CentOS_7 Systemd 入門教程：實戰篇

     
  
 
  一、開機啟動 
  對於那些支援 Systemd 的軟體，安裝的時候，會自動在/usr/lib/systemd/system目錄新增一個配置檔案。 
  如果你想讓該軟體開機啟動，就執行下面的命令（以httpd.service為例）。 
  
  
$ sudo systemctl enable  



  
 

    


    
    
程式設計如同長跑，推薦阮一峰的這篇文章

     
   
推薦阮一峰的一篇文章：http://www.ruanyifeng.com/blog/2018/10/runner.html 
程式設計和長跑一樣，拼的是耐力看誰跑的遠。如果一開始拼命往前跑，後面到了關鍵時刻可能就沒有了體力，如果前期慢慢蓄勢待發，儲備力量，到了關鍵時刻， 
就可以調動全身力量去 



  
 

    


    
    
編程如同長跑，推薦阮一峰的這篇文章

     
 不斷學習   一點   平時   www.   編程   天都   每天   blog   bsp    
推薦阮一峰的一篇文章：http://www.ruanyifeng.com/blog/2018/10/runner.html
編程和長跑一樣，拼的是耐力看誰跑的遠。如果一開始拼命往前跑，後面到了關鍵時