Flexbox佈局 - 中心和100％的Web應用程序

Question

我正在使用網絡應用程序。 HTMl/CSS對我來說從來都不是什麼大問題，只是優化了Internet Explorer的網站:)我用這個應用程序完成了很多工作，只有一些「次要」的東西，我真的不知道如何解決。這就是爲什麼我要求你的幫助：

我認爲這兩個佈局（附加屏幕）可以通過使用新的柔性箱，但我從來沒有與之前的工作，有這麼多不同的規格（2009年，2011年，2012 ...），所以我真的不知道從哪裏開始。第一個問題只是一個普遍問題：這兩種佈局是否可以通過flexbox或HTML/CSS進行操作？

我試圖描述儘可能，真的不知道，如果它有足夠的瞭解這個概念。隨意問任何事情。這兩種佈局都差不多，所以我認爲如果有可能的話，另一種佈局也應該是可行的。

有人在那裏，誰可以給我一個快速和粗略的代碼示例，如何編程這兩個佈局？這對我自己來說是很好的（進入這個flexbox的東西）來描述一下代碼（評論或其他）。對我來說，至少有一些起點是非常有幫助的，因爲目前我只是堅持了幾天。

在此先感謝:)

Answer 1

這應該適用於您的第二個示例：http://jsfiddle.net/8rWwt/

我已經包含非前綴版本，-ms-版本和現代-webkit-版本。這個例子中的語法非常相似。這足以支持大多數仍在使用的Chrome桌面版本，Opera以及IE10和11.火狐正在使用即將推出的版本中前綴最新的語法。當他們自動更新時，它也會在短時間內全面工作。

我第一次做身體Flex容器，使紅色DIV可以居中，並告訴它在兩個行內和塊方向中心：

body { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 

    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

現在紅色的div居中。

接下來我給紅色div添加一個高度（否則就沒有任何東西可以展開，因爲hight會是它的子項的高度），並且使它成爲一個彈性容器（綠色和藍色div不會變成flex項目，除非他們的父項是flex容器）。然後我設定的項目列的方向，使它們堆疊在彼此的頂部，而不是行的默認：

.red { 
    background-color: red; 
    height: 50%; 

    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-direction: column; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

現在幾乎準備就緒。所需要的最後一件事是告訴藍格佔用剩餘的空間：

.blue { 
    background-color: blue; 

    -ms-flex: 1; 
    -webkit-flex: 1; 
    flex: 1; 
} 

如果你想它在當前/舊Firefox和Safari工作，你將需要添加的語法舊的Flexbox。 My article on Smashing Magazine包括底部的表格，映射語法。

第一個例子只是第二個例子的簡化版本。我刪除了flexbox屬性以居中居中，而是將灰色div設置爲100％高和100％寬。我也翻箱子的順序，綠框是第一，應該彎曲：

http://jsfiddle.net/8rWwt/1/

Answer 2

是的，你可以！這裏是一個big tutorial

你的第一個願望：

Live Example

HTML

<div class="parent"> 
    <div class="purple"> 
    </div> 
    <div class="green"> 
     big<br> 
     test<br> 
     content<br> 
     very<br> 
     big<br> 
    </div> 
</div> 

CSS

 
html, body{ 
    height: 100%; 
} 

.parent{ 
    display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ 
    display: -moz-box;  /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox; /* MID: IE 10 */ 
    display: -webkit-flex; /* NEW, Chrome 21+ */ 
    display: flex;   /* NEW: Opera 12.1, Firefox 22+ */ 

    -webkit-flex-flow: column; 
    -moz-flex-flow: column; 
    -ms-flex-flow: column; 
    -o-flex-flow: column; 
    flex-flow: column; 
    height: 100%; 
} 
.purple{ 
    display: -webkit-box; display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -moz-box-flex: auto; 
    -webkit-box-flex: auto; 
    -webkit-flex: auto; 
    -ms-flex: auto; 
    flex: auto; 
    background: purple; 
} 
.green { 
    display: -webkit-box; display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    flex-direction: column; 
    background: green; 
}