CSS3 Flex - 拉伸寬度和高度

我想使用CSS3 Flex模型製作全屏日曆應用程序。雖然我可以使日曆水平地很好地平放，但我無法找到一種方法讓日曆周以相等的比例伸展，以消耗所有可用的高度。CSS3 Flex - 拉伸寬度和高度

下面就來說明我的窘境的jsfiddle：http://jsfiddle.net/CgXLa/

的周平均分佈直到我讓他們display: flex;。即使我將所有的日子都包含在div元素中，而不是每週做出display: flex;，但我仍然有同樣的問題。

我該如何使用Flex模型在水平方向上橫向拉伸和？

來源

2014-01-05 Micah Henning

此外，如果任何人有1500+的聲譽可以創建一個'CSS-flex'標籤，那將是巨大的。 –

標籤已經存在，它是flexbox – vals

@vals謝謝，它被所有Adobe/Macromedia Flex的東西所擁擠。 –

這是我的解決方案。

我已經在幾周內刪除了一個額外的包裝。現在，周，日是日曆的所有直系後裔

<main id="calendar"> 
    <section class="th"> 
     <span>Sunday</span> 
     <span>Monday</span> 
     <span>Tuesday</span> 
     <span>Wednesday</span> 
     <span>Thursday</span> 
     <span>Friday</span> 
     <span>Saturday</span> 
    </section> 
    <div class="week"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div data-date="1"></div> 
     <div data-date="2"></div> 
     <div data-date="3"></div> 
     <div data-date="4"></div> 
    </div> 
    ....

現在我的CSS是

/* Calendar 100% height */ 
#calendar { height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
    align-items: stretch; 
} 

.th { 
    flex: 30px 0 0; 
} 
.week { 
    flex: 30px 1 0; 
    border-bottom: 1px solid #ccc;  
}

的關鍵是給個元素一定高度（柔性基礎：30像素），但不flex-grow，一週也有一些高度開始，但flex-grow：1.

這使得星期從日曆中未使用的所有剩餘空間，均勻地在它們之間。

updated fiddle

來源

2014-01-05 20:54:47 vals

非常感謝！正是我在找什麼！ –

快樂，它幫助！ – vals

感謝此 - 爲了自動拉伸寬度，關鍵部分是將每個flex孩子的寬度設置爲100％。 – jbyrd

CSS3 Flex - 拉伸寬度和高度

回答

相關問題