Flecboxでアイコンを綺麗に並べたい

Question

CSS Flexboxについての質問です

Flexboxを使ってアイコンを７つ並べようと試みています。
1列目、2列目にアイコンを３つずつ並べ、最後の1つを
3列目の左に寄せたいと思っています。
しかしながら、最後の一つが画面の幅いっぱいに広がり、
1列目・2列目のアイコンと同じサイズにならず困っています。
コードは以下のように書いています。

お詳しい方がいらっしゃいましたら、ご教示願います。

該当のソースコード

HTML部分

<div class="icons"> <div class="icon"> <img src="" alt=""> <p>アイコン名</p> 　 </div> ↑これが7個 ・ ・ ・ </div>

CSS部分
.icons{
display: flex;
flex-wrap: wrap;
}
.icon{
flex: auto;
width: 25%;
margin-right: 30px;
}

Comments

[hatena19]

HTMLコードとCSSコードはそれぞれマークダウンのコードブロック内にいれてください。
あるいは、コードを選択しておいてからツールバーの <code>ボタンをクリックしてください。
あとタイトルがタイプミスしてますので修正してください。

Answer 1

しかしながら、最後の一つが画面の幅いっぱいに広がり、

1列目・2列目のアイコンと同じサイズにならず困っています。

※1列目・2列目というのは1行目・2行目という意味だと解釈して回答します。

呈示のCSSコードだけではそうなりませんので、他にCSSがありませんか。
例えば、下記のようなのとか。

.icon img {
  width: 100%;
}

その場合は、.icon の設定を下記のように修正してください。

.icon{
  flex: 0 0 auto; /* 修正 */
  width: 25%;
  margin-right: 30px;
}

あるいは、flexの設定値はデフォルト値ですので削除してもOKです。

.icon{
  width: 25%;
  margin-right: 30px;
}

動作確認用サンプル

Comments

[abebe]

ご回答ありがとうございます。
初学者のため、質問の仕方が拙くてすみません・・・。
ご教示いただいた方法でイメージ通りにできました。

なぜこうなるのか、しっかり勉強したいと思います。