Flexボックスを使用して要素を横に上手に並べてみる【サンプル】

要素を横に収まるように上手に配置する例

<div class="parent">
  <div class="child child1">子要素１</div>
  <div class="child child2">子要素２</div>
  <div class="child child3">子要素３（ながーーーーい要素）</div>
</div>

.parent{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; flex-wrap: nowrap; background-color:gray;}
.child{padding:20px; }
.child1{background-color:#e7ffcb;}
.child2{background-color:#ffd5a5;}
.child3{background-color:#86d0ff;}

ニュース記事一覧に使えそうな例

<a href="#">
    <div style="width:100%; background-color:white; border-radius:5px; box-shadow: 0px 2px 4px #bebebe; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; flex-wrap: nowrap;">
            <div class="date">
                2019.02.01
            </div>
            <div class="title">
                ニュースのタイトルを入力する
            </div>
     </div>
</a>

<style type="text/css">
.date{background-color:#5a5a5a; color:white; font-weight:bold; padding:20px 10px; border-top-left-radius:5px; border-bottom-left-radius:5px; display:flex; align-items: center; /* 縦方向中央揃え */}<br />
.title{color:black; padding:20px 10px;}<br />
</style>