flexboxで画面幅を狭めた際に要素同士の隙間を保つ方法、また折り返された要素の位置の指定方法

要素同士を等間隔に配置するためにflexboxの「justify-content:space-between」を使用しているのですが、
画面幅を狭めていくと、最終的には要素同士がくっつき、隙間がなくなり、
「flex-wrap: wrap」を指定している場合は下に折り返します。
その際に以下の2点質問させていただきたいです。

①flexboxで画面幅を狭めた際に要素同士の隙間を最低限、例えば20pxを担保した状態で、
次の行に折り返しさせることは可能でしょうか？

②下に折り返された要素について例えば中央配置など、配置の指定は可能でしょうか？
今回であれば、3つの要素があり、3つ目の要素が下に折り返されていますが、左寄りになってしまって、見た目が悪いので、中央寄せにしたいです。

図で説明すると下記のような形となります。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>

<body>
    <div class="boxs">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
    </div>
</body>

</html>

.boxs{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.box{
    width: 200px;
    height: 200px;
    background-color: red;
}

行動規範の内容に同意します

回答3件

①については、flex itemにマージンの指定をするだけで実現できます。
②については、折り返した後に真ん中にするのは、justify-content: centerとjustify-content: space-aroundだけなのでどちらかにする必要があると思います。

②のどちらかにすると両端揃えはできなくなります。なので、シンプルにやろうとすると希望のデザインは再現できないので、妥協するか力技でどうにかするしかないですね。
妥協できないのであれば、メディアクエリと組み合わせて折返しが発生した場合にゴニョゴニョするなどの工夫が必要になってくるかと思います。

flexをいろいろ試せるツールがあるのでよかったら使ってみてください。
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

投稿2019/09/12 04:10

uemaSR

総合スコア257

Silky

2019/09/12 11:22

①について、おかげ様で解決できました。 ②について、flexboxで簡単に実現できそうで、意外とできないんですね。。ありがとうございます！教えていただいたツールを使用して、色々試してみます！ご回答ありがとうございます！

行動規範の内容に同意します

ベストアンサー

メディアクエリを併せればどうでしょうか？

CSS
1.box {
2  width: 200px;
3  height: 200px;
4  background-color: red;
5  margin: 10px; /* ← 追加 */
6}
7
8/* ↓ 追加 */
9* {
10  margin: 0;
11  padding: 0;
12}
13
14@media screen and (max-width: 659px) {
15  .box:nth-of-type(3) {
16    margin: 10px auto;
17    padding: 0 10px;
18  }
19}
20/* ↑ 追加 */

投稿2019/09/12 14:29

yoshinavi

総合スコア3523

Silky

2019/09/13 23:49

なるほど！メディアクエリを使用して、3つ目のボックスにのみ、margin: 10px auto;をかければ真ん中になりますね！ ①、②の質問ともに解決しました。ありがとうございました！ちなみに、なぜ「padding: 0 10px;」なのでしょうか？

yoshinavi

2019/09/14 02:59

メディアクエリによる切替の際に、「padding: 0 10px;」がないと意図しない動きになりますので、それを防止するための1例です。

Silky

2019/09/17 17:17

ありがとうございます！

行動規範の内容に同意します

css
1*{
2  box-sizing: border-box;
3}
4.boxs{
5  display:flex;
6  justify-content: center;
7  flex-wrap: wrap; 
8}
9
10.box{
11  width: 200px;
12  height: 200px;
13  background-color: red;
14  margin:10px;
15}