*

フレキシブルボックスレイアウトを使う

公開日: : 最終更新日:2016/03/27 CSS

久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます。ボックスのサイズや配置を柔軟に設定したり、調整したりできる方法をフレキシブルボックスレイアウトといいます。以前説明したpositionプロパティやfloatプロパティを使ったレイアウトの方法より簡単にレイアウトを指定できるようになります。

サンプルコードの実行結果はこちら

フレックスコンテナ

フレックスアイテムを含む親要素のことで、display「flex」又は、「inline-flex」が指定された要素がフレックスコンテナになります。

displayプロパティ
説明
flex この値が指定された要素を、ブロックレベルのフレックスコンテナボックスにする
inline-flex この値が指定された要素を、インラインレベルのフレックスコンテナボックスにする

フレックスアイテム

フレックスコンテナに含まれる子要素のことで、フレックスコンテナは0個以上のフレックスアイテムを持っています。フレックスコンテナの直接の子要素になっているテキストは、匿名のフレックスアイテムに含まれています。

フレックスコンテナにはレイアウトの基本となる2つの軸という物があります。主軸はフレックスアイテムの配置方向を決める軸で、高左軸は主軸に対して垂直に交わる軸です。フレックスアイテムは主軸に沿って配置されるようになっているので、どちらかが主軸又は高左軸になるかを、flex-directionプロパティを使い指定する必要があります。

flex-directionプロパティ
説明
row(初期値) 主軸の方向は、インライン要素が表示される方向と同じになります。日本語のように左から右に書く文字の場合なら主軸も左から右にとなり、フレックスアイテムを左から右へ並べて配置します。
row-reverse 主軸の方向は、「row」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は右から左となるので、フレックスアイテムを右から左へ並べて配置します。
column 主軸の方向は、ブロックレベル要素が表示される方向と同じになります。日本語のように左から右に書く文字の場合なら主軸の方向は上から下にとなり、フレックスアイテムを上から下へ並べて配置します。
column-reverse 主軸の方向は、「column」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は下から上となるので、フレックスアイテムを下から上へ並べて配置します。

スポンサードリンク

関連記事

cateCSSPage

リセットCSSって何?ノーマライズCSSって何?

全称セレクタを使いスタイルをリセットする ブラウザや要素ごとに始めから設定されているスタイルの

記事を読む

CSS

擬似要素とは

前回の記事で紹介した、擬似クラスと似てますが、 今回書く擬似要素は要素内のある場所を対象に適用させ

記事を読む

cateCSSPage

テキストの回り込みを設定するfloatプロパティ

通販サイトやニュースサイトを眺めていると 様々なコンテンツが横に並べて配置され、 それが複数あり

記事を読む

CSS

子要素を透視図法で表示したり、要素の裏面の表示方法を指定する

視点の距離を指定することで子要素で透視図法で表示するときに利用するのがperspectiveプロパテ

記事を読む

cateCSSPage

CSSを書く位置により優先順位が決まる

下記のサンプルのように、同じスタイルを適用していると どうなるのか。 答えを先に言うと「後か

記事を読む

CSS

トランジションの速度のパターンを設定する

transtion-timing-functionプロパティを使うと、変化する速度のパターンをしてい

記事を読む

cateCSSPage

文字を斜体にしたり、文字を装飾する

文字を斜体にするfont-styleプロパティ CSSのfont-styleプロパティを使用するこ

記事を読む

cateCSSPage

CSSの書き方を覚える。

CSSの書き方 CSSはどの「要素」の「もの」を「どんな風」に するかを指定するものであり、半角

記事を読む

cateCSSPage

要素の親子関係を示す子孫セレクタ

特定の親要素に内包する子要素を指定する p{color:blue}、.test{font-size

記事を読む

cateCSSPage

id名,class名をCSSでセレクタにする。

CSSでid名,class名をセレクタに指定する場合、 id名の前には「#(イゲタ)」、class

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑