技術資料

error この記事は最終更新日から1年以上が経過しています。

flexboxの基礎中の基礎のメモ。

<div id="container">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
    <div class="box">d</div>
    <div class="box">e</div>
</div>

#container{
	display: flex;
}
.box{
  border: 1px solid #ccc;
}

See the Pen flexboxの基礎 by nanaka (@nanaka_tokiwa) on CodePen.

横幅を指定して、自動で均等に表示する場合は以下のようにする。

#container{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.box{
  border: 1px solid #ccc;
	width: 19%;
}

See the Pen flexboxで横幅指定して均等表示 by nanaka (@nanaka_tokiwa) on CodePen.