CSS レイアウトサンプル

HTML
<div>
  <div>item01</div>
  <div>item02</div>
  <div>item03</div>
item01
item02
item03

P001 display:flex
item01
item02
item03
P001-1 justify-content:right;
item01
item02
item03
P001-2 justify-content:center;
item01
item02
item03
P001-3 justify-content:space-between;
item01
item02
item03
P001-4 justify-content:space-around;
item01
item02
item03
P001-5 justify-content:space-evenly;
item01
item02
item03
P001-6 > flex 2, flex:1, flex:3
item01
item02
item03
P001-7 > flex 2, flex:1, flex:3 & text-align:r.c.l
item01
item02
item03
P001-8 > flex 100, flex:1 4em, flex:100 & text-align:c.c.c
item01
item02
item03
P001-9 > flex 100, flex:1 4em, flex:100 & display:flex; justify-content:center;
item01
item02
item03
P001-10 flex-direction:row-reverse;
item01
item02
item03
P001-11 flex-direction:column;
item01
item02
item03
P001-12 flex-direction:column-reverse;
item01
item02
item03

HTML
<div>
  <div>item01</div>
  <div>item02</div>
  <div>item03</div>
  <div>item04</div>
  <div>item05</div>
  <div>item06</div>
  <div>item07</div>
  <div>item08</div>
item01
item02
item03
item04
item05
item06
item07
item08

P002 display:grid; grid-template-columns: 1fr 1fr 1fr;
item01
item02
item03
item04
item05
item06
item07
item08
P002-1 grid-template-rows: 2fr 1fr 3fr;
item01
item02
item03
item04
item05
item06
item07
item08
P002-2 grid-gap: 1em;
item01
item02
item03
item04
item05
item06
item07
item08
P002-3 > div:nth-child(4) grid-column: 1 / span 3;
　　※rowは横線、columnは縦線の位置を指定する(先頭から指定は1以上、末尾から指定は-1以下)
　　※SPANは相対位置
item01
item02
item03
item04
item05
item06
item07
item08
P002-4 > div:nth-child(2) grid-column: 2; grid-row: 1 / span 3;
item01
item02
item03
item04
item05
item06
item07
item08
P002-5 grid-template-areas:
　　"area1 area2 area3"
　　"area1 area4 area4"
　　". area5 .";
　　> div:nth-child(1) grid-area: area1;
　　> div:nth-child(2) grid-area: area2;
　　> div:nth-child(3) grid-area: area3;
　　> div:nth-child(4) grid-area: area4;
　　> div:nth-child(5) grid-area: area5;
item01
item02
item03
item04
item05
item06
item07
item08
ラベル: