莫著急... 美好的東西往往來的都比較慢!

23 Aug, 2016

使用CSS3 Flexbox布局

        本文由大漠根據Helen Emerson的《Using the CSS3 flexbox layout》所譯,整個譯文帶有我們自己的理解與思想,如果譯得不好或不對之處還請同行朋友指點。如需轉載此譯文,需注明英文出處:http://helephant.com/2013/03/23/css3-flexbox-layout,以及作者相關信息

        ——作者:Helen Emerson

        ——譯者:大漠

Flexbox(中文版本可以點擊這里)的布局是一個用于頁面布局的全新CSS3模塊功能。它可以把列表放在同一個方向(從左到右或從上到下排列),并且讓這些列表能延伸到占用可用的空間。較為復雜的布局可以通過嵌套一個伸縮容器(flex container)來輔助實現。

    Flexbox可以簡單快速的創建一個具有彈性功能的布局,當在一個小屏幕上顯示的時候,Flexbox可以讓元素在容器(伸縮容器)中進行自由擴展和收縮,從而容易調整整個布局。它的目的是使用常見的布局模式,比如說三列布局,可以非常簡單的實現。

     

    看看一些例子來了解Flexbox擅長哪種東西。

    伸縮容器(flex containers)和伸縮項目(flex items)

    一個Flexbox布局是由一個伸縮容器(flex containers)和在這個容器里的伸縮項目(flex items)組成。

    伸縮容器(flex containers)是一個HTML標簽元素,并且“display”屬性顯式的設置了“flex”屬性值。在伸縮容器中的所有子元素都會自動變成伸縮項目(flex items)。

    這有一個三列布局的例子。外面的div容器是一個伸縮容器,而里面的left、main和right三個div都是伸縮項目:

使用CSS3 Flexbox布局

    設置一個簡單的伸縮容器很容易,代碼如下:

<div class="container">div>
.container {  display: flex;}

    伸縮方向與換行(flex-flow)

    伸縮容器有一個CSS屬性“flex-flow”用來決定伸縮項目的布局方式。如果伸縮容器設置了“flex-flow”值為“row”,伸縮項目排列由左向右排列:

使用CSS3 Flexbox布局

    如果“flex-flow”值設置為“column”,伸縮項目排列由上至下排列:

使用CSS3 Flexbox布局

    這里將展處樣設置伸縮容器,使用伸縮項目在一行中顯示:

.container {  display: flex;
  flex-flow: row;}

    一個伸縮容器中的所有伸縮項目既可以排列在單行也可以多行排列。這個主要由“flex-flow”是否設置為“wrap”來決定。如果伸縮容器設置了“wrap”屬性值,當伸縮項目在伸縮容器中無法在一行中顯示的時候會另起一行排列。

使用CSS3 Flexbox布局

    這里展示了如何將伸縮容器設置為“wrap”:

.container {  display: flex;
  flex-flow: row wrap;}

    伸縮項目(flex items)

    在伸縮容器中的所有子元素都將自動變成伸縮項目。沒有額外配置CSS的必要。你唯一需要的做的就是設置伸縮項目的尺寸。

    如果伸縮容器把“flex-flow”設置為“row”后,伸縮項目將需要設置他們的寬度。伸縮項目的高度將會自動設置為伸縮容器的高度:

使用CSS3 Flexbox布局

    如果伸縮容器把“flex-flow”設置為“column”后,伸縮項目將需要設置他們的高度,伸縮項目的寬度將會自動設置為伸縮容器的寬度:

使用CSS3 Flexbox布局

    給伸縮項目設置“width”和“height”屬性來定義伸縮項目尺寸,而這個伸縮項目是獨立于其他伸縮項目。例如,如果我們給主內容(content)設置了一個600px的寬度,不管伸縮容器中有一個、兩個或者上百個伸縮項目,主內容的寬度都是600px。

    如果你想伸縮項目根據伸縮容器剩余的空間來決定伸縮項目的寬度,你可以使用“flex”屬性。例如,我們可以告訴瀏覽器,左邊欄和右邊欄占用了伸縮容器減去主內容寬度的空間。

    flex的值于對應的空間成正比。如果左邊欄設置了值為“1”和右邊欄設置了值為“2”,伸縮容器剩余的空間將按比例分配給左邊欄和右邊欄,并且右邊欄所占的空間是左邊欄的兩倍:

使用CSS3 Flexbox布局

    下面是示例中運用在伸縮項目上的一些代碼,展示了獨立寬度和按比例計算的寬度:

.main {  width: 600px;}.left {  flex: 1;}.right {  flex: 2;}

    完整的實例

    這是一個很簡單的實例,Flexbox創建了一個經典的三列布局。主內容寬度為60%,而邊欄是使用“flex”屬性,按比例自動根據伸縮容器剩余空間計算得到對應的寬度:

    HTML結構

<div class="container">
  <nav class="nav left">…nav>
 
  <section class="main">…  section>
 
  <nav class="nav right">…nav>div>

    CSS代碼

.container {  display: flex;
  flex-flow: row;}.main {  width: 60%;}.left {  flex: 1;}.right {  flex: 2;}

    示例效果

使用CSS3 Flexbox布局

    在線演示案例

    瀏覽器支持

    在2012年寫作時,瀏覽器支持定案(最新版本)語法并不是很好。這個例子可以在Opera和webkit內容的Chrome下運行很好(webkit下需要添加前綴-webkit)。

    在我的文章示例代碼中沒有寫上瀏覽器的前綴,主要是讓大家更好的理解。在2013年03月前為了更廣泛的支持瀏覽器,你需要添加webkit內核和ie瀏覽器的前綴。你也可能需要考慮添加支持flexbox的老語法版本。我個人認為可以先學習flexbox的使用,在實際項目中推遲使用,直到最終的語法得到更多瀏覽器的支持。

譯者手語:整個翻譯依照原文線路進行,并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處,還煩請同行朋友指點。謝謝!

    如需轉載煩請注明出處:

    英文原文:http://helephant.com/2013/03/23/css3-flexbox-layout

    中文譯文:http://www.w3cplus.com/css3/css3-flexbox-layout.html

  • 上一篇:一個完整的Flexbox指南
  • 下一篇:FitVids.JS —— 讓視頻響應屏幕尺寸變化
  • 029-68787028,4000-613-001 & [email protected]

    西安市高新區灃惠南路與科技七路交匯處西南角, 西水·水岸陽光1號樓1-604號

    重庆时时彩是正规的吗?