Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Flexbox(縦並び)

Web

Flexboxで縦並びを簡単に!

 

以前、ご紹介しました「Flexboxで横並びを簡単に!」

「floatの解除が面倒」「レイアウトが崩れる」といった解決策として、投稿しました。

現在WEBデザインにおいて重要視されるレスポンシブデザイン。

そこで今回は、スマホでは頻繁に使用されるこのコードについてご紹介します。

Flexboxの書き方

Flexbox

Flexコンテナという親要素の中にFlexアイテムという子要素をHTMLで作ります。

HTML

<div class=””container””>
<div class=””item””>Item1</div>
<div class=””item””>Item2</div>
<div class=””item””>Item3</div>
</div>

CSS

.container {
display: flex;
}

ここまでは前回と同じコーディングです。

垂直方向での揃え方

垂直方向で揃えたい場合はflex-directionを使います。
画像と画像、画像とテキストなど<div></div>で囲まれた要素それぞれに作用します。

CSS

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

 

Flexbox-column

column…上から下へ縦並び
column-reverse…下から上へ縦並び

その他の flex-direction

ちなみに横並びも flex-directionで出来ちゃいます。

Flexbox-row

row… 左から右へ横並び
row-reverse…右から左へ横並び

これは単純に flex を使えばいいような気がしますが一応、ご紹介。

最後に

flex-direction は要素が向かう方向を指示していると考えると分かりやすいかも!
縦並びレイアウトを是非この機会に実践してみてください!

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  2. Web

    【CSS】CSS Gradientで複雑なグラデーションを作成

    CSS Gradientというフリーサイトを使ってCSSで複雑なグラデ…

  3. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  4. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

  5. Web

    【実例サンプルあり】簡単に実装できるcssスニペット集

    この記事では、短いコードで実装可能なcssプロパティを紹介して…

  6. Web

    ハンバーガーメニューはなぜ動くのか!CSSだけ& jQuery使用のコードで確認しよう

    ハンバーガーメニューとはWebサイトを見ていると、右上などにメニュ…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP