レイアウト – dispaly:flex; | ゼロから始めるweb屋な生活

レイアウトに便利な display:flex; を紹介します。

webサイト作成の際に全体のレイアウトを1列~3列程度のカラムにしたり、グリッドにしたりなど、様々な方法を考えると思います。

display:flex;はそんな時に非常に心強いプロパティです。それでは早速始めてみましょう。

今回のhtmlはこちら

<!doctype html>	
<html lang="ja">	
<head>								
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">			
<title>Webのタブの名前だよ！</title>
</head>								
<body>  
     <div class="oya">
          <div class="oya1">						
	       <div class="oya2">
	           <p class="block">box1</p>
	           <p class="block">テキスト</p>
               </div>
	       <div class="oya3">
	           <div class="oya4">	
	               <p class="block">box2</p>
                       <p class="block">テキスト</p>
                   </div>
                   <div class="oya5">
	               <p class="block">box3</p>
	               <p class="block">テキスト</p>
                   </div>
	       </div>
           </div>
      </div>
</body>								
</html>

ポイント

・<p></p>タグと<div></div>多用してるけど、単純だから読んでみて！

CSSはこちら

* {
  margin: 0;
  padding: 0;
}

.oya {
  background-color: gainsboro;
  padding: 20px;
}

.oya1 {
  max-width: 960px;
}

.oya2 {
  background-color: teal;
  width: 600px;
}

.oya3 {
  width: 330px;
}

.oya4 {
  background-color: blueviolet;
}

.oya5 {
  background-color: forestgreen;
}

.block {
  color: white;
}

ポイント

・oya1要素の最大幅は960px　⇒　box1,2,3,が入る幅は960px以上にはならない

・oya2要素幅は600px　⇒　box1の幅は600px

・oya3要素幅は330px　⇒　box2,3の幅は330px

今はこんな感じです。

次にbox1とbox2・box3を並べてみます。

* {
  margin: 0;
  padding: 0;
}

.oya {
  background-color: gainsboro;
  padding: 20px;
}

.oya1 {
  margin: 0 auto;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
}

.oya2 {
  background-color: teal;
  width: 600px;
　margin-right: 10px;
}

.oya3 {
  width: 330px;
}

.oya4 {
  background-color: blueviolet;
}

.oya5 {
  background-color: forestgreen;
}

.block {
  color: white;
}

ポイント

・oya1にdisplay:flex;　⇒　oya1の真下の階層にあたるoya2とoya3を並べる

・oya1にjustify-content: space-between; ⇒ oya1の要素幅内で、oya2とoya3を両端に並べる

今は、こんな感じ。

次に、box1、box2、box3に高さを追加します。

* {
  margin: 0;
  padding: 0;
}

.oya {
  background-color: gainsboro;
  padding: 20px;
}

.oya1 {
  margin: 0 auto;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
}

.oya2 {
  background-color: teal;
  width: 600px;
　height: 600px;
　margin-right: 10px;
}

.oya3 {
  width: 330px;
}

.oya4 {
  background-color: blueviolet;
　height: 400px;
  margin-bottom: 10px;
}

.oya5 {
  background-color: forestgreen;
　height: 250px;
}

.block {
  color: white;
}

すると、2段カラムレイアウトの出来上がり～