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

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  2. Web

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

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

  3. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

  4. Modern Fluid Typography Editor

    Web

    簡単なCSSでフォントサイズをレスポンシブ対応にしよう!

    フォントサイズのレスポンシブ対応WEBサイトをレスポンシブ対応にす…

  5. Web

    目指せ!positionマスター!

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

  6. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP