レイアウト – dispaly:flex;

Pocket

レイアウトに便利な 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段カラムレイアウトの出来上がり~

floatよりも手軽なので、みんな是非使ってみて下さい!

ps

一部margin等、説明省略箇所があるので分からなければ質問お願いしまーす。

またもflexについて詳しく知りたいという方はこちらのサイトがおススメです。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet