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

    CodePenの使い方を極めよう

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

  3. Web

    Flexboxで横並びを簡単に!

    皆さんは横並びのメニューなどのコーディングの際にflotタグ使っていま…

  4. Web

    SVGアイコンをCSSで色を替えられるようにしよう

    今回はSVGアイコにCSSを適用させて色を変えられるようにする方法を紹…

  5. Web

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

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

  6. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP