相关疑难解决方法(0)

我想使用flexbox使用全高应用程序.我在这个链接中使用旧的flexbox(显示:框;以及其他东西)找到​​了我想要的东西:CSS3 Flexbox全高应用和溢出

对于旧版本的flexbox css属性,这是一个正确的解决方案.

如果我想尝试使用较新的flexbox属性,我将尝试在同一链接中使用第二个解决方案,但使用高度为0px的容器 "黑客"弹性框; 它使显示垂直滚动.

我不喜欢它,因为它引入了其他问题,它更像是一个解决方案而不是解决方案.

我准备了一个基本示例的jsfiddle:http://jsfiddle.net/ch7n6/

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

它是一个"全高html网页",由于内容元素的flexbox,页脚位于底部.我建议你在css代码和结果之间移动吧来模拟不同的高度.

我恐怕不能理解弹性增长.如果你跳到下面的JSFiddle - 我理解它的方式,.big应该是另一个的三倍.flex-item.如你所见,不是这样.为什么？

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>

我想显示一些文本,然后是虚线,然后在HTML页面的同一行显示更多文本,例如

Name: .......................................................... (Engineer)

我希望"Name"在左边框左对齐,而"Engineer"在右边框右对齐,然后浏览器能够用重复点填充两者之间的间隙.

我已经尝试了几种不同的方法来使用CSS和HTML来实现这一点,但不能完全正确.我不想指定每个组件的宽度(实际或百分比),以便解决方案可以重复使用不同长度的单词,例如,相同的解决方案可以使用:

Factory Location: .................................... (Not invoice address)

希望这个问题有道理,任何建议表示赞赏,谢谢.