Flexbox使い方基本(動画解説+サンプルコード)
Flexboxを使い方を動画で解説させていただきます。
・横並びにして、さらに要素を均等にならべる
・縦中央寄せ
などの、難しい配置を一瞬にして終わらせることができるようになります。
Flexbox使い方解説動画
サンプルデータDownloadはこちら↓
サンプルコード
HTML
<body>
<div class="box box_01">
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
</div>
<h2>横並び</h2>
<div class="box box_02">
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
</div>
<h2>横並び + 均等に配置</h2>
<div class="box box_03">
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
</div>
<h2>横並び + 均等に配置 + 左右に余白をつける</h2>
<div class="box box_04">
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
</div>
<h2>横並び + 均等に配置 + 左右に余白をつける + 縦中央寄せ</h2>
<div class="box box_05">
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
</div>
<h2>横並び + 均等に配置 + 左右に余白をつける + 折り返す</h2>
<div class="box box_06">
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
<div class="in_box">in_box</div>
</div>
</body>
CSS
body{
background: rgb(9, 76, 128);
padding: 2em;
}
h2{
margin: .3em 0;
color: #fff ;
font-size: .8em;
}
.box{
margin-bottom: 2em;
height: 200px;
background: #fff ;
}
.in_box{
height: 20%;
width: 20%;
max-width: 100px;
background: rgb(247, 173, 83);
border: 2px solid rgb(226, 135, 31);
display: flex;
justify-content: center;
align-items: center;
font-size: .7em;
color: rgb(131, 81, 20);
}
.box_01{
display: flex;
justify-content: space-around;
align-content: center;
flex-wrap: wrap;
}
/* 横並び */
.box_02{
display: flex;
}
/* 横並び + 均等に配置 */
.box_03{
display: flex;
justify-content: space-between;
}
/* 横並び + 均等に配置 + 左右に余白をつける */
.box_04{
display: flex;
justify-content: space-around;
}
/* 横並び + 均等に配置 + 左右に余白をつける + 縦中央寄せ */
.box_05{
display: flex;
justify-content: space-around;
align-items: center;
}
/* 横並び + 均等に配置 + 左右に余白をつける + 折り返す */
.box_06{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content:center;
}
この記事が気に入ったらサポートをしてみませんか?