FlexBoxの使い方（１）〜display:flexについて（動画あり）

HTML&CSS
2016.09.11

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。また、今までできなかったこともうまく解決できるようになりました。まずは簡単に横並びのレイアウトを作成してみましょう。

スポンサーリンク

FlexBox解説動画

通常フローのレイアウトを横並びのレイアウトに変更する例

flex-img
上のような通常フローを下のような横並びのレイアウトに変えるにはflexレイアウトを使うと簡単です。

flex-img1

今回のサンプルとコード

HTMLコード

<div class="content">
<div class="column">

<img src="images/flower.jpg" />

Lorem ipsum dolor sit amet...

</div>
<div class="column">

<img src="images/green.jpg" />

Lorem ipsum dolor sit amet...

</div>
<div class="column">

<img src="images/ajisai.jpg" />

Lorem ipsum dolor sit amet...

</div>
</div>

通常フローレイアウトのCSSコード

.content{
width:100%;
margin: auto;
}
.column{
padding: 10px;
border:1px solid #333;
margin-bottom: 50px;
}

横並びレイアウトのCSSコード

.content{
display:flex;
width:100%;
margin: auto;
}
.column{
padding: 10px;
border:1px solid #333;
margin-right: 20px;
}
.column:last-child{
margin-right:0;
}

作成手順

  1. flexコンテナにdisplay:flexを記述するだけで横並びレイアウトが出来上がります。それだけでOK！！簡単なのです。
flexレイアウトを使うためには、「flexコンテナ」と「flexアイテム」２つの用語を覚えましょう。
flex-container

  1. flexコンテナとは横並びにするカラムをまとめる親要素
  2. flexアイテムとは横並びにするカラムのこと

あとは、flexコンテナに　display : flex;　とするだけ。

display:flexを使用するポイント

縦並びと横並びを明示的に指定する方法

全ての始まりはflexコンテナに　「display:flex」と記述することから始まります。
flexを使用して縦並びを明示的に指定するには「flex-direction:column」のプロパティと値を使用します。

横方向のレイアウトはflexコンテナに flex-direction : row;
縦方向のレイアウトはflexコンテナに flex-direction : column;

flex2

DogRoboの毎日の仕事といえばブロック積みをすること。ブリキ製のロボットにとって単純作業はお手のものだ。けれども、困った案件もある。それはブロックを空中で横並びにする作業だった。それは、ブロックを浮遊状態にしてから並べる必要があるからだ。
dog_float
デザイナー諸君に聞いてもらいたい。Webの世界とはいえ、現実の物理の法則に従ったデザインを心がけて欲しい。ブロックを空中で横並びにするとは物理の法則を逸脱した行為なのだから..
そんなことをブツブツ言いながら作業をするのだった。

Web動画記事一覧

スポンサーリンク
タイトルとURLをコピーしました