響應(yīng)式設(shè)計(jì)的未來(lái)——Flexbox作者：大漠 日期：2013-04-28 點(diǎn)擊：3690
在CSS中，浮動(dòng)幾乎代替了表格用來(lái)服務(wù)于布局，做為替身，比表格好用得多。但他們?nèi)匀挥邢蕖，F(xiàn)在有一個(gè)建議的解決方案稱(chēng)為CSS Flexible Box布局模塊，一般稱(chēng)為Flexbox。 Flexbox是CSS3推薦方法，用來(lái)幫助設(shè)計(jì)師更好的控制頁(yè)面的元素，在沒(méi)有比較好的解決方案之前，F(xiàn)lexbox要比其他現(xiàn)代布局方案要更強(qiáng)。 真的，我們?nèi)匀粵](méi)有在使用，因?yàn)镕lexbox支持至今還是受到限制的。但當(dāng)Flexbox得到瀏覽器友好支持的時(shí)候，加上媒體查詢(xún)的彈性布局會(huì)使Web設(shè)計(jì)師在Web布局上帶來(lái)革命性的變化。 CSS的痛楚在寫(xiě)這篇教程時(shí)，支持Flexbox的瀏覽器還是有限的。Chrome瀏覽器需要添加其自身的前綴“-webkit-”才能識(shí)別。其他的Webkit內(nèi)核瀏覽器，特別是移動(dòng)端的Safari和Android瀏覽支持都是僅僅有限的。而微軟IE只有IE10。不過(guò)這個(gè)Flexbox規(guī)范本身是在不斷變化，在過(guò)去的幾年里看到有關(guān)于他的許多變化。但隨著規(guī)范的定案和瀏覽器后期的開(kāi)發(fā)，F(xiàn)lexbox終將成為一個(gè)很重要的屬性——用于設(shè)計(jì)上的布局。下面主要介紹它在響應(yīng)式設(shè)計(jì)中應(yīng)用。 容器（Containers）一個(gè)Flexbox布局需要?jiǎng)?chuàng)建一個(gè)包含元素的容器，比如一個(gè)“<div>”，用來(lái)包裹一些項(xiàng)目。最基本的，F(xiàn)lexbox會(huì)讓其伸縮項(xiàng)目放在一個(gè)線(xiàn)上（主線(xiàn)、側(cè)線(xiàn)），不需要修改HTML結(jié)構(gòu)就能實(shí)現(xiàn)其同一基線(xiàn)上的任意擺放。如下面的示例： <div> <p>1</p> <p>2</p> <p>3</p> </div>
在上面的示例中，三個(gè)伸縮項(xiàng)目可以通過(guò)“flex-direction”屬性使用其在伸縮容器中放置在第一和最后，也可以是水平或垂直擺放。在一個(gè)web頁(yè)面中，這意味著，在不改變HTML結(jié)構(gòu)情況之下整個(gè)布局可能會(huì)重安排。這將是一個(gè)名副其實(shí)的響應(yīng)式設(shè)計(jì)。 當(dāng)使用“display:block”時(shí)元素變成塊形式垂直擺放（在不浮動(dòng)情況之下），“display:inline”會(huì)讓元素包裹文本保持在同一行，而“display:flex”可以讓設(shè)計(jì)師改變方向、順序、對(duì)齊方式和間距。從列表布局角度出處，F(xiàn)lexbox布局適用于任何系列的產(chǎn)品。Flexbox可用的用途包括：
最重要的是要注意Flexbox對(duì)設(shè)計(jì)的視覺(jué)風(fēng)格的影響。重新排列元素在屏幕上顯示的次序并不會(huì)影響他們的HTML結(jié)構(gòu)與Javascript的框架或屏幕閱讀器的閱讀。 對(duì)齊（ALIGNMENT）除了方向，伸縮項(xiàng)目有可能會(huì)推到伸縮容器的開(kāi)始位置（全部靠左）、結(jié)束位置（全部靠右）、居中以及有一個(gè)的間距?？梢栽谏炜s容器上添加“justify-content”屬性來(lái)控制伸縮項(xiàng)目之間對(duì)齊方式：開(kāi)始、結(jié)束等。
上圖在伸縮項(xiàng)目排列中隱含的線(xiàn)稱(chēng)為“主軸（main axis）”。這里的示例讓導(dǎo)航的鏈接沿著主軸線(xiàn)（顯示的黑線(xiàn)），根據(jù)需要自動(dòng)改變空間。 每個(gè)主軸都有一個(gè)方向(flex-direction)和一個(gè)流(flex-fow):水平方向的有向左或向右（row或row-reverse）；垂直方向的有向下和向上（column和column-reverse）。上面例子中的第一個(gè)設(shè)置了flex-row為row，意思是“flex-start”讓伸縮項(xiàng)目向左邊推。當(dāng)flex-row設(shè)置為“row-reverse”時(shí)，像最后一個(gè)示例所示，“flex-start”推到伸縮容器最右邊。 包裹（WRAPPING）當(dāng)一系列的伸縮項(xiàng)目到達(dá)伸縮容器的終點(diǎn)位置時(shí)，可以讓伸縮項(xiàng)目在一行顯示或者多行顯示，你就傳統(tǒng)的內(nèi)聯(lián)元素一樣。
上面的屬性應(yīng)用到伸縮容器上。其他的適用于每個(gè)伸縮項(xiàng)目。 指序（ORDER）最后一個(gè)主要屬性（有關(guān)于響應(yīng)式設(shè)計(jì)方面）用來(lái)控制元素出現(xiàn)的精確順序。
默認(rèn)情況之下，伸縮容器中的每一個(gè)伸縮項(xiàng)目都有一個(gè)“order:0”屬性。給其中一個(gè)伸縮項(xiàng)目設(shè)置“order:1”，會(huì)讓這個(gè)伸縮項(xiàng)目沿主軸向右（側(cè)軸向下）推動(dòng)。如果設(shè)置一個(gè)伸縮項(xiàng)目的order值小于0，例如：“order:-1”，會(huì)讓這個(gè)伸縮項(xiàng)目沿主軸向左（側(cè)軸向上）推動(dòng)。 Flexbox的側(cè)軸具有和主軸一樣的屬性功能。到目前為止，影響響應(yīng)式設(shè)計(jì)的主要屬性是“flex-direction”、“flexbox-justify”和order。 Flexbox和Media Queries響應(yīng)式設(shè)計(jì)需要在不同屏幕尺寸具有不同的布局。不幸的是，一些布局要求HTML具有一個(gè)特定的方式，比如說(shuō)圖片在標(biāo)題前，或者圖片在標(biāo)題后。Flexbox可以通過(guò)CSS來(lái)控制更多的移位，這樣網(wǎng)頁(yè)設(shè)計(jì)師就可以通過(guò)媒體查詢(xún)?cè)诓煌钠聊淮笮≈袘?yīng)用不同的配置。 這里有一個(gè)挑戰(zhàn)性的案例：一個(gè)新聞網(wǎng)站想要展示其最新的文章片段。每個(gè)片段都有一個(gè)縮略圖和不同數(shù)量的文本。需要有三種布局風(fēng)格：桌面寬屏；筆記本的中等大小屏和智能手機(jī)的320px寬。可訪(fǎng)問(wèn)性，它必須保持導(dǎo)航在或者接近網(wǎng)站的標(biāo)題，但出版本商想盡可能的突出大標(biāo)題顯示。
HTML結(jié)構(gòu)為了結(jié)構(gòu)的清晰，這個(gè)示例使用了簡(jiǎn)單的HTML結(jié)構(gòu)： <html> <body> <div class="wrapper"> <header> <img src="images/trendy-logo.png" /> </header> <nav> <a href="#">home</a> <a href="#">about</a> <a href="#">other</a> <a href="#">contact</a> </nav> <section> <article> <figure><img src="images/box.png" /></figure> <div> <h2>Sample headline goes here</h2> <p>Sample text sample text sample text sample text sample text sample text sample text </p> </div> </article> <article>…</article> </section> </div> </body> </html> 有一些重要的事項(xiàng)：
Media Queries條件我們?cè)O(shè)置了三個(gè)響應(yīng)式斷點(diǎn)：窄屏、中屏和寬屏。 @media only screen and (max-width: 480px) { … /* 窄屏 */ } @media only screen and (min-width: 481px) and (max-width: 960px) { … /* 中屏 */ } @media only screen and (min-width: 961px) { … /* 寬屏 */ } 窄屏：交替圖標(biāo)和重排結(jié)構(gòu)1、首先指定每個(gè)“<article>”元素作為伸縮容器。在這些例子中，我們使用“-webkit-”前綴來(lái)支持Chrome。 article { display: -webkit-flex; -webkit-align-items: start; } 2、接下來(lái)為所有的文章列表設(shè)置方向： article:nth-child(odd) { -webkit-flex-direction: row; } article:nth-child(even) { -webkit-flex-direction: row-reverse; } 3、把內(nèi)容優(yōu)先于導(dǎo)航顯示，我們需要把“.wrapper”設(shè)置為伸縮容器，并設(shè)置伸縮流的方向?yàn)椤癱olumn”: .wrapper { display: -webkit-flex; -webkit-flex-direction: column; } 4、最后，把<nav>元素也設(shè)置成伸縮容器，使用“justify-content”屬性設(shè)置導(dǎo)航鏈接之間的間距工： nav { -webkit-order: 999; display: -webkit-flex; -webkit-justify-content: space-around; } 設(shè)置了“order”為999是為了過(guò)度的布局，而沒(méi)有設(shè)置二到八這樣的數(shù)值，其實(shí)任何正數(shù)都可以工作。但設(shè)置999是為了應(yīng)對(duì)未來(lái)order的變化，999是一個(gè)安全的數(shù)值，但有一些網(wǎng)站將會(huì)超過(guò)導(dǎo)航998節(jié)。 中屏：一個(gè)縱列瀏覽器在480px到800px之間寬，可能有足夠的高度連續(xù)展示文章列表供用戶(hù)閱讀。這個(gè)布局，我們要做到的就是這一點(diǎn)： 1、像窄屏的布局一樣，將導(dǎo)航欄變成彈性布局，并給導(dǎo)航鏈接留有一定的空間： nav { display: -webkit-flex; -webkit-flex-direction: row; -webkit-justify-content: space-between; } 2、Flexbox布局不需要花哨，這個(gè)例子演示的了如何讓Flexbox制作一個(gè)等寬列，可用來(lái)代替以前那種依靠浮動(dòng)和清除浮動(dòng)的布局： article { display: -webkit-flex; -webkit-justify-content: start; -webkit-flex-direction: row; } 寬屏：使用額外的空間寬屏的布局主要利用“.wrapper”伸縮容器的空間，把文章列表像tiling一樣的鋪置。 1、把“.wrapper”變成伸縮容器，將把導(dǎo)航放在左邊： .wrapper { display: -webkit-flex; -webkit-flex-direction: row; } 如果想把導(dǎo)航放在右邊，可以使用“row-reverse”來(lái)替代“row”。 2、標(biāo)題和導(dǎo)航疊加是個(gè)很棘手的事情，因?yàn)槲覀儼?.wrapper"變成了伸縮容器，同時(shí)也使標(biāo)題、導(dǎo)航和section的文章列表變成了水平展示。意思就是標(biāo)題、logo和左邊的導(dǎo)航疊加在一列中。 解決這樣的問(wèn)題，我們要有一點(diǎn)手法：使用一個(gè)負(fù)的margin-left和padding-top，將導(dǎo)航拉到logo的下面。 nav { width: 25%; margin-left: -50px; } nav a { display: block; padding: 10px 0; } nav a:first-child { padding-top: 120px; } 3、文章列表要像Tile一樣展示，需要給section設(shè)置成伸縮容器，然后縮小讓其放置在同一行 section { display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-align-items: flex-start; } article { width: 180px; margin: 10px; } 結(jié)果：三種不同的布局，利用空間來(lái)實(shí)現(xiàn)響應(yīng)式布局是最好的。 下一步雖然Flexbox布局還不能得到廣泛的支持，但后結(jié)隨著規(guī)范的落定和各大瀏覽器廠(chǎng)商的支持力度提高，F(xiàn)lexbox將會(huì)成為CSS布局的好工具。 譯者手語(yǔ)：整個(gè)翻譯依照原文線(xiàn)路進(jìn)行，并在翻譯過(guò)程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)。謝謝！ 如需轉(zhuǎn)載煩請(qǐng)注明出處： 英文原文：http://blog./responsive-design-of-the-future-with-flexbox 中文譯文：http://www./css3/responsive-design-of-the-future-with-flexbox.html |
|
|
來(lái)自： quasiceo > 《待分類(lèi)1》
