ミギムキ

[CSS] Flexboxの折り返した要素にだけマージンをつけたい

サンプルコード

html

<div class="flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
スポンサー広告

CSS

.flex { display: flex; justify-content: center; flex-wrap: wrap; margin: -10px -10px 0px; } .flex div { width: calc(100% - 20px); height: 100px; margin: 10px 10px 0px; border: 1px solid #3388dd; box-sizing: border-box; text-align: center; } @media (min-width: 992px) { .flex div { width: calc(50% - 20px); } } @media (min-width: 1200px) { .flex div { width: calc(33.3% - 20px); } }

仕組み、解説、補足など

スポンサー広告