无法将flexbox child的宽度设置为100%

Question

我正在学习CSS flexbox并且正在做一个简单的布局,我希望第一个flex子项显示100%宽度的父级和rest flex items包装在下面.此外,包裹的弹性项目应以特定比例占据宽度(易于使用'flex'属性设置).

为此,我将第一个flex项的"flex-basis"属性设置为100%,并将next 2的flex属性设置为我想要的比例.以下是相关CSS的样子(链接到完整的小提琴如下):

.main{
    max-width: 1000px;
    margin: 100px auto;

    display: flex;
    flex-flow: row wrap;
}

/*using ususal shorthand notation*/

.flex-item:nth-child(1) {
   flex:1 100%;
}

.flex-item:nth-child(2) {
    flex:2;
}

.flex-item:nth-child(3) {
    flex:3;
}

这应该将第一个项目的宽度设置为1000px,将接下来的两个宽度分别设置为400px和600px; 包裹并显示在第一个孩子下面.

但由于某种原因,CSS中断,第二和第三项被推到主容器外.

更奇怪的是,为flex项添加边距修复了整个事情,我不明白这是怎么回事(我必须做些蠢事).甚至可以在".flex-item"规则中添加一些边框或填充.

.flex-item{
    margin: 5px;
}

这是JS小提琴.您可以尝试在CSS中取消注释'.flex-item'规则以查看正在发生的事情.

我懒得不添加任何前缀(因为几乎每个新浏览器都支持它),但最新的FF,IE和Chrome的问题是相同的.

Answer 1

第二个和第三个元素的宽度为 0，因此它们可以适合任何位置..

这样他们就可以留在第一线。

只要设置1px作为基础，它们就会在第二行

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #555;
}

.main{
	max-width: 1000px;
	margin: 20px auto;
	border: 1px dotted #999;
	padding: 20px;

	display: flex;
	flex-flow: row wrap;
}
/* adding any border, margin, padding rules here fixes it */

.flex-item:nth-child(2) {
	flex:2 1px;
    background-color: lightyellow;
}

.flex-item:nth-child(3) {
	flex:3 1px;
}

.flex-item:nth-child(1) {
	flex:1 100%;
}

	<div class="main">

		<p class="flex-item">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consequat lorem. In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>

		<p class="flex-item">
			In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>

		<p class="flex-item">
			In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit 

.flex-item:nth-child(2) {
    flex:2 1px;
}

.flex-item:nth-child(3) {
    flex:3 1px;
}