要素を横に収まるように上手に配置する例
<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
ニュースのタイトルを入力する