ミギムキ

[CSS] Flexboxでよく使うパターンまとめ

やりたいこと

三つの円を並べる

html

<div class="circle_3"> <a href="#"> <div> <p>エゥーゴ</p> </div> </a> <a href="#"> <div> <p>ティターンズ</p> </div> </a> <a href="#"> <div> <p>アクシズ</p> </div> </a> </div>
スポンサー広告

CSS

.circle_3 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .circle_3 > a { position: relative; padding-top: 48%; margin: 0px 1%; width: 48%; border-radius: 50%; background-color: #3388dd; color: #fff; } .circle_3 > a:nth-of-type(1) { margin: 0px 2%; } .circle_3 > a > div { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 80%; text-align: center; } @media print, (min-width: 768px) { .circle_3 > a { position: relative; padding-top: 31%; margin: 0px 1%; width: 31%; } .circle_3 > a:nth-of-type(1) { margin: 0px 1%; } }

三つの枠を並べる

html

<ul class="box_3"> <li> <img src="" alt=""> <div> <p></p> <a href="#"></a> </div> </li> <li> <img src="" alt=""> <div> <p></p> <a href="#"></a> </div> </li> <li> <img src="" alt=""> <div> <p></p> <a href="#"></a> </div> </li> </ul>

CSS

.box_3 { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; } .box_3 > li { position: relative; width: 100%; } .box_3 > li > div { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } @media print, (min-width: 768px) { .box_3 > li { width: 33.33%; } }
スポンサー広告