見出し画像

Flexbox使い方基本（動画解説+サンプルコード）

石川/ホームページの作り方・Webマーケティング・稼ぎ方

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;
}

この記事が参加している募集

はじめてのインターネット

2,637件

この記事が気に入ったらサポートをしてみませんか？