*

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

公開日: : 最終更新日: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」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は下から上となるので、フレックスアイテムを下から上へ並べて配置します。

スポンサードリンク

関連記事

CSS

IE限定?グリッドレイアウトを使う

グリッドレイアウトとは、表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイ

記事を読む

cateCSSPage

枠線の形、太さを指定したい。

今回、触れるのは「border」プロパティです。コンテンツ領域と 前回の記事で紹介した「paddi

記事を読む

CSS

アニメーションを実行方向を指定したり、停止したりする

アニメーションを逆再生 アニメーションを繰り返すよう設定した場合に、折り返して逆向きで実行する(逆

記事を読む

cateCSSPage

水平方向・垂直方向の形が異なる角丸を設定する。

今回書き留めておくのが、タイトルの通りです。 前回は水平方向と垂直方向の角丸が同じ場合を 紹介し

記事を読む

CSS

円形・放射状のグラデーションを指定する

radial-gradient()関数を利用すると、1点から放射状に広がる円形のグラデーションを表示

記事を読む

cateCSSPage

overflowプロパティを使い表示領域を設定する

width,heightを使って高さを設定したコンテンツを入れる箱に、 サイズを超えるもの、画像や

記事を読む

cateCSSPage

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

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

記事を読む

cateCSSPage

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

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

記事を読む

cateCSSPage

物の重なりの順番を設定するz-indexプロパティ

コンテンツの重なりの順番を設定するときに使用するプロパティは z-indexプロパティです。pos

記事を読む

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 ↑