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 - 拉伸宽度和高度

回答

相关问题