初めに
html css で中央寄せやコンテンツの配置に使用される「display flex」や「text-align」「margin-0 auto」などの使い方についてまとめてみました。
「box」の親要素に書くのか子要素に書くのかべきなのかが、曖昧だったためコードを比較しました。
11/9、１回目、html cssの初心者向け
こちらのQiitaの記事を参考にしました。
https://qiita.com/ko8@github/items/90d5c807deecdcb6ce65
４パターンに分けて解説します。
1 コピペそのまま
2 子要素に「display：flex」を書いた
3 子要素の最終行に「margin-0 auto」
4 子要素の最初の行に「margin-0 auto」
パターン１
<style>
.wrapper02 {
width: 400px;
height: 400px;
margin: 20px auto;
background-color: #ccc;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content-box {
width: 100px;
height: 100px;
background-color: red;
margin-right: 6px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.box {
width: 25px;
height: 25px;
background-color: blue;
font-size: 6px;
margin: 0 2px;
line-height: 25px;
text-align: center;
}
</style>
<body>
<div class="wrapper02">
<div class="content">
<div class="content-box">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="content-box">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
<div class="content-box">
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
</div>
</div>
</body>
親要素である「class="content-box"」のCSSに
display: flex;
justify-content: center;
flex-wrap: wrap;
を書いた場合子要素の青色のBoxが3つ中央に配置されています。
ちなみに
align-items: center;
は立て方向の中央寄せに使われています。
パターン２
.content-box {
width: 100px;
height: 100px;
background-color: red;
margin-right: 6px;
（コードを3行切り抜いています）
align-items: center;
}
.box {
width: 25px;
height: 25px;
background-color: blue;
font-size: 6px;
margin: 0 2px;
line-height: 25px;
text-align: center;
（コードを貼り付けました）
display: flex;
justify-content: center;
flex-wrap: wrap;
}
子要素である青色のBoxが縦一列に並びました。
display:flexが正しく反映されていません。
※間違った使用方法のコードのため（）をコードの中に利用しています。
パターン3
.content-box {
width: 100px;
height: 100px;
background-color: red;
margin-right: 6px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.box {
（この下に１行追加しています）
margin: 0 auto;
width: 25px;
height: 25px;
background-color: blue;
font-size: 6px;
margin: 0 2px;
line-height: 25px;
text-align: center;
}
パターン1と同じ配置になります。
下のmargin 0 2pxが利用されるためです。
パターン4
.content-box {
width: 100px;
height: 100px;
background-color: red;
margin-right: 6px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.box {
width: 25px;
height: 25px;
background-color: blue;
font-size: 6px;
margin: 0 2px;
line-height: 25px;
text-align: center;
（この下に１行追加しています）
margin: 0 auto;
}
親要素の赤色のboxの中に子要素の4つ青色のboxが3つ並んでおり、5つ目は下に配置されています。
margin:0 auto が適用されていることが分かります。そのため、
赤色のboxの幅100px÷青色のboxの幅25px＝4つ
まで配置されてしまいます。
ちなみに上のmargin:0 2pxをコメントアウトしてもこれと同じ画像になります。
まとめ
1、親要素に「display flex」を書く
2、子要素に「margin」を書く
3、親要素の幅に（子要素の幅＋margin)を調整してコンテンツの数が決まる。
今回では「html CSS 中央寄せ」と検索してそのまま利用しようとして、失敗してしまったため、まとめなおしましたが、HTMLでは後からコンテンツの場所や数を調整したいと思うと少し面倒なので、先にコンテンツの幅やレイアウトを決めておく必要があると思いました。