display :flex;<br>を使う際の両端の揃え方について質問です。
以下の画像のように子要素同士に空白を持たせつつ両端を見出しと同じ幅に揃えたいのですが、(画像1)
flexの子要素に対してmargin-left,margin-rightをかけてしまうと両端に空白ができてしまいます。(画像2)
flexの子要素のmarginを下記のように個別で指定してしまうと(cssコードA)
画面幅を変えた時にmarginがまちまちになってしまいます(画像3)
/////////cssコードA ここから////////////
div:nth-of-type(1) { margin-left: 0; } div:nth-of-type(2) { margin-right: 0; } div:nth-of-type(3) { margin-left: 0; } div:nth-of-type(4) { margin-right: 0; } div:nth-of-type(5) { margin-left: 0; margin-right: 0; }
//////////cssコードA ここまで//////////////
flexboxを使ってcssだけでitem同士の間隔を取りつつ、綺麗に両端を揃える方法はないのでしょうか?
ご存じの方がいらっしゃいましたら、ご教授ください。よろしくお願いします。
以下現在のサンプルコードです//////////////
<h1>程よい見出し</h1> <section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </section> <style> h1{ background: #999999; color: #ffffff; text-align: center; } section { display: flex; flex-wrap: wrap; justify-content:space-around; align-items: center; } div{ height: 100px; line-height: 100px; text-align: center; flex-basis: 200px; margin: 10px 10px; } /*カラー指定***/ div:nth-of-type(1) { background: #ffdddd; margin-left: 0; } div:nth-of-type(2) { background: #ffffaa; margin-right: 0; } div:nth-of-type(3) { background: #aaffff; margin-left: 0; } div:nth-of-type(4) { background: #ffddff; margin-right: 0; } div:nth-of-type(5) { background: #ddffdd; margin-left: 0; margin-right: 0; } div:nth-of-type(n + 2) { } </style>