flex 横並び各種

TOP >  コードサンプル一覧 >  flex 横並び各種

横並びの設定はこれまでfloatを使用してきたがflexにした方が効率的と考え、使用方法をまとめてみる。

横に3つ並びで隙間は5%開ける場合

html

<div class="cardGroup">
	<section class="card">
		<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
	</section>
	<section class="card">
		<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
	</section>
	<section class="card">
		<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
	</section>
</div>

CSS

.cardGroup {
	display: -webkit-flex;
	display: flex;
}
.card {
  background: #F3F3F3;
  margin-right: 5%;
  -webkit-flex: 1;
  flex: 1//各ボックスが等倍;
  padding: 0 10px;
}
.card:last-child {
  margin-right: 0;
}

See the Pen flex 3分割で要素が均等 by ヤマダソウイチロウ (@detail-drawing) on CodePen.

PAGE TOP ▲

「迅速・丁寧な対応」と「かゆい所に手がと届く対応」に心がけておりますのでお気軽にご相談ください。メールフォームはこちら。