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區的解決方案。