flex boxのjustify-content: centerで各項目のスペースをもっと空けたい

Question

４つの項目があり、横一列にしたいです。中央に配置したうえで、それぞれの項目にスペースをあけたいのですが、コードがわかりません。flex boxのjustify-content: centerにすると、全くスペースなしで、ただ４つの項目が中央に来てしまうし、evenlyでやると、４つの項目がだだっぴろく広がって均等配置されるだけで、私の問題は解決してくれません。解決方法を教えてください。

Answer 1

コンテナー(役の要素)にはdisplay: flex;とjustify-content: center;を指定しておき、その中の項目自体のスタイルにmargin-rightで空けたい隙間を指定する。

末尾の項目の右側にできる隙間が気になるなら、:last-child疑似クラスを使って、margin-rightに0を指定する。

Comments

[B_J]

ありがとうございます。
.flex-menu{
display:flex;
justify-content: center;
margin-right: 20px;}

とやってみましたが変わりません・・・

その中の項目自体に、というのはどういうことでしょう？

[Daregada]

flexレイアウトには、「並べたい複数のアイテムを囲む要素」(コンテナー)と、「コンテナーの中で並ぶ複数の要素」(アイテム)という2つの役割を果たす要素がそれぞれ必要です。たとえば、ul要素がコンテナーとすると、li要素がアイテムになります。
CSSでは、「display: flex;」や「justify-content: center;」はコンテナーの要素に対して指定し、「flex: 1;」や「order: 1;」などはアイテムの要素に対して指定します。
回答の「その中の項目自体に」というのは、コンテナーに含まれるアイテムの要素に対して、CSSで「margin-right: 20px;」といった指定をしろ、ということ。
あなたが上のコメントでやっているのは、「コンテナーに対してmargin-rightを指定した」なので、それじゃダメなわけです。

[Daregada]

もっと具体的に回答したいところですが、「あなたが」HTMLやCSSを提示してくれないので、こういう説明にならざるを得ないのです。

[B_J]

すみません、CSSは先ほどのもので、HTMLが下記です。便宜上リンクは掲載していません。
この場合、どこにmargin-rightを記載すべきなのでしょうか？

<div class="flex-menu">
<a href="リンク">A</a>
<a href="リンク">B</a>
　　　　<a href="リンク">C</a>
<a href="リンク">D</a>
</div>

[Daregada]

「.flex-menu a」に対して設定してください。たとえば、

.flex-menu a {
display: inline-block;
margin: 20px;
padding: 0.5em 2em;
border: 1px green solid; /* 確認用 */
}

[B_J]

.flex-menu a {
margin: 20px;
とやったところ、できました。感激しました。本当にありがとうございます。
しかし、「a」は目からうろこでした。.flex-menu a 　と.flex-menu 　の違いは何なのでしょうか？HTMLシートには、.flex-menu の決まりしか決めておらず、「a」のついたものについては何も記載していないのですが・・・。初心者ですので、よろしくお願い致します。

[Daregada]

「.flex-menu」は、「class="flex-menu"」が指定された要素(今回だとdiv要素)に対するスタイルの指定、「.flex-menu a」は、「class="flex-menu"」が指定された要素の中に含まれるa要素(ハイパーリンク)に対する指定です。

[Daregada]

質問を「解決済」にしてください。

[B_J]

なるほど！そういうことですね！本当に本当に感謝します。教えて頂いたことをヒントに、リンクする項目のABCDに下線が付いていたのですが、同じ要領でやればいいのかと思いつき、 text-decoration: none;をコーディングしたら、見事に下線が消えて感激しています。<a href > の場合に、このテクニックは使えるということですね？

[Daregada]

a要素をボタンのようにしてしまうと、(確認用に付けた)枠内をクリックすれば(文字のない場所をクリックしても)リンク先に飛んでしまいます。

それがいやなら(文字をクリックしたときだけ飛びたいなら)、ul要素とli要素を使い、li要素の中にa要素を入れます。この場合はコンテナーがul要素、アイテムが(複数の)li要素になり、a要素を「display: inline-block;」にはしません。

[B_J]

ありがとうございます！今回は教えて頂いた「display: inline-box;」は入れておりません。分からなくなってしまったのですが、.flex-menu a {
display: inline-block;
margin: 20px;
padding: 0.5em 2em;
border: 1px green solid; /* 確認用 */

この中で、ということでしょうか？
どういうことでしょうか？
もう少し詳しく教えてくださいませ。

[Daregada]

inline-blockの書き間違いでした。要求にきりがないのでここまで。質問は「解決済」にしてください(2回目)。