display:flex;で画像５枚を横並びにして、余白なしで画面幅いっぱいに広げる方法

Question

前提・実現したいこと

画像５枚を横並びにしたいのですが、画像間の余白、上下左右の余白もなしでみっちり横幅いっぱいに広げるにはどうしたらよいですか？
justify-contentでは余白を均等に割ることはできますが、余白なく横並びにすることはできませんよね。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html→
<ul class="flex">
<li class="flex-item">
<img src="images/11.jpg" alt="image1">
</li>
<li class="flex-item">
<img src="images/12.jpg" alt="image2">
</li>
<li class="flex-item">
<img src="images/13.jpg" alt="image3">
</li>
<li class="flex-item">
<img src="images/14.jpg" alt="image4">
</li>
<li class="flex-item">
<img src="images/15.jpg" alt="image5">
</li>
</ul>
css→
flex{
display:flex;
}
.flex-item{
flex:0 1 20%;
}

ソースコード

試したこと

ここに問題に対して試したことを記載してください。
flexプロパティでflex:0 1 20%;
として、それぞれの画像幅を全体の２０％としてみたのですが、余白ができてしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[azuapricot]

https://www.billionwallet.com/homepage/flex-property.html

↑とかみてみました？

[shunsaku87]

すみません、そのページ見ました！

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[hatena19]

現状のhtmlとcssのコードを提示してください。

Answer 1

img の幅を100%に指定してください。

.flex{
  display: flex;
}
.flex-item {
  flex: 0 1 20%;
}

.flex-item > img {
  width: 100%;
}

Comments

[shunsaku87]

ありがとうございます！解決しました！