1

すべてのアイテムに flex-grow:1

2

3

4

5

6

1

このアイテムだけ大きく

2

3

4

このアイテムだけ小さく

HTML

<div id="container">
<section>
<h1>1</h1>
<p>すべてのアイテムに flex-grow:1</p>
</section>

<section><h1>2</h1></section>
<section><h1>3</h1></section>
<section><h1>4</h1></section>
<section><h1>5</h1></section>
<section><h1>6</h1></section>
</div>

<div id="container2">
<section>
<h1>1</h1>
<p>このアイテムだけ大きく</p>
</section>

<section><h1>2</h1></section>
<section><h1>3</h1></section>

<section>
<h1>4</h1>
<p>このアイテムだけ小さく</p>
</section>
</div>

CSS

section {
	margin:5px;
	padding:0;
	border:solid 1px #ccc;
	text-align:left}
section h1 {text-align:center}
section p {margin:2em 1em}

div#container {
	display:flex}
div#container section {
	flex-basis:100px;
	flex-grow:1;}

div#container2 {
	display:flex}
div#container2 section {
	flex-basis:100px;
	flex-grow:1}
div#container2 section:nth-child(1) {flex-grow:5}
div#container2 section:nth-child(4) {flex-shrink:5}