HTML、CSSで同じ行に多くの画像カードを維持する方法

Jeewantha Lahiru：

私は（減少ウィンドウサイズ）私の窓のサイズを変更すると、右上隅にあるカードはdown.theyを行っている私のhtml page.Butで同じ行に4枚のカードを作成しましたline.Howに滞在していない私が保つことができます同じラインでの私のすべてのカードであっても、私は私の窓のサイズを変更する場合は？

<div class="tab1cards">
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px;">
                    <h4><b>Wild Life</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Heritage</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Beach</b></h4>
                </div>
                <div class="card">
                    <img src="safari.jpg" alt="safari" style="width: 250px">
                    <h4><b>Sri lanka</b></h4>
                </div>
            </div>

これは、スタイルシートであります

.card{
    float: left;
    padding: 16px;
    text-align: center;
}

バウィヤシン：

.card {
  padding: 16px;
  text-align: center;
}

.tab1cards {
  display: flex;
  flex-direction: row;
}

<div class="tab1cards">
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px;">
    <h4><b>Wild Life</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Heritage</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Beach</b></h4>
  </div>
  <div class="card">
    <img src="safari.jpg" alt="safari" style="width: 250px">
    <h4><b>Sri lanka</b></h4>
  </div>
</div>

このコードは、問題を解決し、単一の行にそれらを整列します。