概要
コンテンツをタイル状に陳列させる レイアウトをcssプロパティーflexを使って実装する方法を紹介用途
- カードレイアウトなど、コンテンツをタイル状に陳列させる
- CSSプロパティーのflexを利用
検証ブラウザ
- Microsoft Edge
- IE11
- IE10
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<ul class="c-block">
<li class="c-block__item">テキスト1</li>
<li class="c-block__item">テキスト2</li>
<li class="c-block__item">テキスト3</li>
<li class="c-block__item">テキスト4</li>
<li class="c-block__item">テキスト5</li>
<li class="c-block__item">テキスト6</li>
<li class="c-block__item">テキスト7</li>
<li class="c-block__item">テキスト8</li>
</ul>
SCSS
.c-block {
display: flex;
justify-content: start;
flex-wrap: wrap;
&__item {
width: 30%;//任意
margin-right: 5%;//任意
margin-bottom: 5%;//任意
&:nth-of-type(3n) {//(Xn): X = 右端の列の倍数
margin-right: 0;
}
}
}
CSS
.c-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 5%;
border: 1px solid #223a70;
}
.c-block__item {
box-sizing: border-box;
width: 30%;
padding: 5vw;
color: #fff;
text-align: center;
margin-right: 5%;
margin-bottom: 5vw;
}
.c-block__item:nth-of-type(odd) {
background-color: #223a70;
}
.c-block__item:nth-of-type(even) {
background-color: #007bbb;
}
.c-block__item:nth-of-type(3n) {/* (Xn): X = 右端の列の倍数 */
margin-right: 0;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
