こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてフリーランスに。主にWeb制作しています。
趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
htmlを学び始めた頃は本当に理解が全然できなくて、何が分からないかが分からない状態でしたが
段々と慣れてきて、こういう仕組みにすれば、とか応用もできるようになってきました
自分の苦手なところとか必死に理解したところをブログにしたためております。
基本のレイアウトFlexboxを作っていきます。
htmlとcss
HTML
<div class=”container”><!– 親要素 –>
<div class=”box”>box1</div><!– 子要素 –>
<div class=”box”>box2</div>
<div class=”box”>box3</div>
<div class=”box”>box4</div>
</div>
display:flex;をあてないとこんな感じです
CSS
.container {
width: 900px;
margin: auto;
/* 親要素にdisplay:flex;を当てる */
display: flex;
/* 横並びの種類 */
justify-content: center;
}
.box {
/* 子要素の装飾 */
background-color: #86bbc6;
color: #fff;
margin: 1rem;
padding: 3rem;
}
display:flex; を当てるとこんな感じに横並びに
さらにjustify-content: center;で真ん中に寄せられます
子要素を親要素で囲っているので
横並びにするためには「親要素のcontainer」にdisplay:flex;をあてる必要があります
間違えて子要素に追加してしまうとい凡ミスをよくやりました。
justify-contentの種類
justify-contentは揃え方を指定するときに使用します。
種類はこんなん↓
justify-content: center;
子要素が中央揃えになります
※見やすいようにmarginで間を開けています。
justify-content: flex-start;
初期設定、左揃えになります
justify-content: flex-end;
右揃えになります
justify-content: space-between;
両端から均等に配置されます
※見やすいようにmarginを0にしています
justify-content: space-evenly;
両端も含めて均等に配置されます
justify-content: space-around;
両端も含めて均等に配置されますが端の余白は半分です
ではdisplay:flex;とjustify-contentと仲良くなって良きweb生活を送りたいと思います！
コメント