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

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

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

 

<div class="parent">
  <div class="child child1">子要素1</div>
  <div class="child child2">子要素2</div>
  <div class="child child3">子要素3(ながーーーーい要素)</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;}

 

子要素1
子要素2
子要素3(ながーーーーい要素)

子要素1
子要素2
子要素3
子要素4

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

 

<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>

 

2019.02.01
ニュースのタイトルを入力する

 

2019.01.21
ニュースのタイトルを入力する

 

Qulii

CTA-IMAGE 中高生向け知的体験プラットホームを公開中!

CSSカテゴリの最新記事