flex:wrap;のときに、左右の幅を調整する方法

Question

###やりたいこと
下記のHTMLがあるとき、

➀数字の要素（.flex > div）
→左に寄せたい。

➁その要素全体（.flex）
→.warpの左右真ん中に置きたい。

という２つを満たしたいです。

<section class="section1">

<div class="wrap">

<div class="flex">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

</div>

</section>

###やってみたこと
次のCSSでは、各数字は左に来るものの、その要素全体は真ん中に来てくれません。

図のように、グレーの範囲の右側が大きくなってしまうのです。

/*数字の要素全体をグレーの左右真ん中にしたいCSS*/
.wrap {
    text-align: center;
    margin: 0 auto;
}

/*特に問題がないと思われるCSS*/
.section1 {
    background: #888;
    padding: 10px;
}
.flex {
    display: flex;
    justify-content: start; /*ビミョーなところ*/
    flex-wrap: wrap;
}
.flex div {
    background: pink;
    width: 50px;
    margin: 10px;
    text-align: center;
}

上のCSSの/*ビミョーなところ*/のjustify-content: start;をcenterにすれば、数字の要素全体はグレーの真ん中には来るのですが、すると今後は数字の各要素が左寄せになってくれず、９や１０まで真ん中に来てしまうのです。

なんとか冒頭の２つを両立させる方法をご教示いただけませんでしょうか？

table-cellなども試したのですが、どうしてもできず質問させて頂きました。

よろしくお願いいたします。

Comments

[defghi1977]

/*ビミョーなところ*/の前に全角スペースがあるので, 削除して下さい.

[退会済みユーザー]

ご指摘ありがとうございます。質問文を修正いたしました。

Answer 1

列数が数パターンならlast-childでmargin-right計算すればメディアクエリである程度ゴリ押し出来るかな…。

.flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.flex div:last-child{
  margin-right: calc((10px + 50px + 10px) * 2 + 10px);
}

例えばこれだとdivが10個なら４列と３列が対応出来ます。

Comments

[退会済みユーザー]

なるほど。最後の子の右側に、他の子たちの幅を追加してあげるのですね。考えておりませんでした。ありがとうございます。

Answer 2

恐らくこういった配置にしたいのだと思うのですが、この例では数字をspanで囲って隙間を作っています。
親要素をwidth25%で均等に4つ横並びに配置し、paddingで隙間を作っています。

質問者様がされたいレイアウトは、Flexboxよりもgridの方が向いていると思いますので、検討されてはいかがでしょうか？

Comments

[退会済みユーザー]

ありがとうございます。まさに仰るとおりですね。使い分け方を知りませんでしたので参考にさせて頂きます。

Answer 3

子ノードの幅(width)が固定値ですとなかなかにうまく行かないようです. 代替案として親要素に対する比率で設定するのは如何でしょうか?

<div class="flex">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

.flex {
	background-color: gray;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	padding: 10px;
}
.flex div{
	--margin: 10px;
	background: pink;
	width: calc(25% - var(--margin) * 2);
	margin: var(--margin);
	text-align: center;
}

NOTE:
Gridレイアウトでも考えてみましたが, 全く同じ状況になります.
NOTE:
あくまで固定幅に拘るのであれば, スクリプトで子ノードの偏り幅を計算しtransform属性で右にずらすといった方法が考えられます.

Comments

[退会済みユーザー]

「--margin」という指定方法をはじめて知りました。またこちらの方法でもきちんとできました。ありがとうございます。感謝です。

[defghi1977]

CSS変数という記法でvar関数から値を参照することが可能です.
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables
これが使えると, ぐっと表現の幅が広がります.

[退会済みユーザー]

へぇ~！どう検索したらいいものか迷っていたので、リンク先、うれしいです。

解決+変数のご指導ということで、ベストアンサーにさせて頂きました。

どうもありがとうございますっ!!

Answer 4

ちょっと前に同じような質問があったので

Flex boxで左右均等配置しつつ回り込んだ要素を左寄せにしたい
https://teratail.com/questions/117116

やはりgridがいいでしょうねえ

Answer 5

.flex {
    display: flex;
    justify-content: flex-start;　/*ビミョーなところ*/
    flex-wrap: wrap;
}

これでどうでしょう

Comments

[defghi1977]

これだと, 改行後のboxの左寄せがうまく行っていません.

[defghi1977]

それだと今度は左右の隙間幅が均等になりません. 私も悩んだのですが, これ結構出来そうで出来ない厄介なパターンに該当していそうです.

[Atsushi_Okumura]

https://codepen.io/RaRukAnA/pen/MVLVWp/
こうではないってことですかね

[defghi1977]

多分
<div class="wrap" style="width: 300px;">
この"幅"が重要で, 何か一つ取っ掛かりがないとうまく中央揃えにならないんでしょうね.

幅や列数などの縛りを入れないとうまく行かないのだと思います.

[Atsushi_Okumura]

あーなんも考えずに入れてしまいましたけど、そうですね
margin:0 auto;
を有効にするには幅を指定しないと
.wrap
の幅がautoで100%になってしまって中央寄せはできないですね。

[退会済みユーザー]

質問で幅の件を明確にしておりませんでしたので、当然の誤解だと思います。失礼いたしました。でも、ご回答誠にありがとうございます。参考になりました。

[defghi1977]

むしろ「flex/grid」レイアウトの弱点が明確化されたことで良い質問となったと思います.