Question

我正在学习CSS flexbox并且正在做一个简单的布局，我希望第一个flex子项显示100％宽度的父级和rest flex项目包装在下面。此外，包裹的弹性项目应以特定比例占据宽度（易于使用'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 Fiddle。您可以尝试在CSS中取消注释'.flex-item'规则以查看正在发生的事情。

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

Answer 1

第二和第三个元素的宽度为0，因此它们可以放在任何地方..

他们留在第一线的方式。

只需设置1px作为基础，它们将位于第二行

＆＃13;

*{
	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%;
}

＆＃13;

	<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

＆＃13;

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

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

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

1 个答案: