Flexbox配置

Question

我有以下的html标记。我希望h1标签充分利用页面（100％）和三篇文章，以便使用flexbox在一行中出现。如果需要，图像应缩小以适合行。

#content { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
#content>h2 { 
 
    flex: 0 1 100%; 
 
} 
 

 
#content>article { 
 
    padding: 5px; 
 
    border: 1px solid #cccc33; 
 
    background: #dddd88; 
 
    flex: 1 0 50%; 
 
}

<section id="content"> 
 
    <h2>Featured Work</h2> 
 
    <article> 
 
    <img src="http://placehold.it/450x450"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/450x450"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/450x450"> 
 
    </article> 
 
</section>

这里是的jsfiddle： https://jsfiddle.net/fejt3m1s/

Answer 1

#content { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; /* 1 */ 
 
    min-height: 800px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#content>h2 { 
 
    flex: 0 0 100%;    /* 2 */ 
 
} 
 

 
#content>article { 
 
    flex: 1 0 30%;    /* 3 */ 
 
    text-align: center; 
 
    padding: 5px; 
 
    border: 1px solid #cccc33; 
 
    background: #dddd88; 
 
} 
 

 
img { 
 
    max-width: 100%;   /* 4 */ 
 
}

<section id="content"> 
 
    <h2>Featured Work</h2> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
</section>

注：

1. Pack flex lines to the top of the container（否则你可能会得到线之间的差距）。
2. 使h1消耗整行，这迫使后续项目创建新行。
3. 每行只允许有三个article元素。每个都有相同的宽度。
4. 将图像保留在Flex项目内。

Answer 2

您需要设置flex: 0 0 100%h1元素和max-width: 100%的图像元素。

#content { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#content>h1 { 
 
    flex: 0 0 100%; 
 
} 
 
#content>article { 
 
    padding: 5px; 
 
    border: 1px solid #cccc33; 
 
    background: #dddd88; 
 
    flex: 1; 
 
} 
 
img { 
 
    max-width: 100%; 
 
}

<section id="content"> 
 
    <h1>Featured Work</h1> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
</section>

Answer 3

老实说，我只需将h1标签Flexbox的外面。这使事情变得简单很多。这里有一个工作示例：

#content { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
#content>article { 
 
    padding: 5px; 
 
    border: 1px solid #cccc33; 
 
    background: #dddd88; 
 
    flex: 1; 
 
}

<h1>Featured Work</h1> 
 

 
<section id="content"> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
    <article> 
 
    <img src="http://placehold.it/350x350"> 
 
    </article> 
 
</section>

编辑：

要解决行的问题，你可以看看下面内纳德Vracar区的解决方案。