はじめに
まずは以下のようなサンプルコードを書いてみます。
<div class="container">
<div class="sample">sample1</div>
<div class="sample">sample2</div>
<div class="sample">sample3</div>
<div class="sample">sample4</div>
<div class="sample">sample5</div>
<div class="sample">sample6</div>
</div>
.sample {
background: skyblue;
margin: 10px;
padding: 10px;
}
結果。
ここから、要素の配置を色々と変えていきます。
このとき、CSSでfloat: left;
みたいなことをするよりも、フレックスボックスやグリッドを使った方が、簡単に自由なレイアウトができるみたいです。
フレックスボックス
CSSに以下のコードを追加します。
.container {
display: flex;
}
結果。
横並びになりました。
さらにいろいろいじっていきます。
並び順を逆にする(横)
.container {
display: flex;
flex-direction: row-reverse;
}

.container {
display: flex;
flex-direction: column-reverse;
}

.container {
display: flex;
flex-wrap: wrap;
}

.container {
display: flex;
justify-content: center;
}
右揃え(水平)
.container {
display: flex;
justify-content: flex-end;
}

.container {
display: flex;
justify-content: space-between;
}

.container {
display: flex;
justify-content: space-around;
}

.container {
display: flex;
align-items: stretch;
height: 20vh;
}

.container {
display: flex;
align-items: flex-start;
height: 20vh;
}

.container {
display: flex;
align-items: flex-end;
height: 20vh;
}

.container {
display: flex;
align-items: center;
height: 20vh;
}

.container {
display: grid;
}

.container {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 20px;
}

.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
gap: 10px;
}

おまけ
おすすめの本です。どちらかというとCSSに重点が置かれている感じがします。デザインについての説明が豊富なのが特徴です。
1冊ですべて身につくHTML-CSSとWebデザイン入門講座