タグ「フレキシブルボックス」

フレキシブルボックス レイアウト 完全解説

基本概念

フレキシブルボックス レイアウトは、W3Cの仕様書「CSS Flexible Box Layout Module Level 1, W3C Candidate Recommendation, 1 March 2016」によって定義されている。従来、floatプロパティ等によって裏技的に行われてきた、段落ボックスを横並びにするといった配置を行うためのスタイルである。その名称どおり、単なる横並びだけでなく、より柔軟に配置を行う手段が用意されている。

仕様書では、以下のとおり、その概要が述べられている。

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container:

  • can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
  • can have their display order ‘reversed’ or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
  • can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
  • can “flex” their sizes to respond to the available space
  • can be aligned with respect to their container or each other on the secondary (cross)
  • can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

構造

フレキシブルボックス レイアウトの構造は、以下の図のごとく定義されている。

図1a

フレキシブルボックス レイアウトを実現する領域を表す要素をフレックス コンテナ、その領域内で実際に配置される要素をフレックス アイテムと呼ぶ。

フレックス アイテム(以下、アイテム)が配置される方向を軸(axis)と呼び、当該言語の文字と行の送りに応じて、文字送りが主軸(main axis)、行送りが交差軸(cross axis)と定義される。日本語横組みのテキスト、すなわち文字が左から右へ、行が上から下へ送られる場合、水平方向が主軸、垂直方向が交差軸となる。一方、日本語縦組みテキストでは主軸が垂直方向、交差軸が水平方向となる。

これらの軸の方向を表すものとして、始点と終点が定義される。日本語横組みテキストの場合、左端が主始点(main start)、右端が主終点(main end)、上端が交差始点(cross start)、下端が交差終点(cross end)である。startとendという概念は、関連プロパティの値に反映されている。

また、主軸方向の”幅”を主サイズ(main size)、交差軸方向の”高さ”を交差サイズ(cross size)と呼ぶ。すなわち、フレックス コンテナ(以下、コンテナ)の幅と高さということである。当然、縦組みテキストにおいては、主サイズが高さ、交差サイズが幅となるのは、自明の理であろう。

コンテナの定義

任意の要素をコンテナとして定義するには、displayプロパティを使用する。この値をflexもしくはinline-flexにすることで、当該要素はコンテナとなる。

  • 例1 display: flex;
  • 例2 display: inline-flex;

displayプロパティそのものは、CSS Level 2以前の太古の昔から存在するが、その値がCSS Flexible Box Layout Module Level 1モジュールにおいて拡張されたことになる。

コンテナとなる要素の態様に目を向けてみるならば、値がflexの場合、当該要素はブロックレベル表示で扱われる。故に、display: blockの場合と同じように、元来インライン表示のa要素に適用し、コンテナ要素自体に幅や高さを指定することが可能になる。

同様に、値がinline-flexの場合はdisplay: inline-blockと同等であり、幅や高さが指定できる段落内文字列としてコンテナ要素が扱われる。

そのうえで、コンテナ要素の直接の子要素に対し、フレキシブルボックスによる配置が適用されるようになる。なお、コンテナの要素内容がテキストだった場合でも、その文字列全体をひとつのアイテムとして、配置が適用される。

ただし、アイテムが要素ではなく文字列のみの場合は、アイテム側専用のプロパティを、要素内容(文字列)に対して使用することはできない。

「フレキシブルボックス レイアウト 完全解説」の続きを読む→

Firefoxとflex-flow

概要

おおよそ1年前、Firefoxのバージョンは20でした。その際、このブラウザーのフレキシブルボックスレイアウト(CSS Flexible Box Layout Module Level 1)の対応度を調べたところ、以下のような問題点がありました。

  • プロパティ値はdisplay:-moz-boxのまま
  • フレックスコンテナ/コンテンツにoverflow:hiddenを適用するとフレキシブルボックスが正しく表示されない
  • %単位のサイズ指定がフレックスアイテムに反映されない

その後、CSS Flexible Box Layout ModuleはLevel 1として最終草案(2014年3月25日付)まで策定が進み、一方、Firefoxもバージョン28.0となっています。この28では、上記の問題も解消されていました。 「Firefoxとflex-flow」の続きを読む→

フレキシブルボックスにおけるOperaの問題点

最近投稿したいくつかのページをOperaで表示したところ、フレキシブルボックスによるレイアウトが崩れていることに気付きました。

Operaの不正表示1
Opera 12でフレキシブルボックスレイアウトが崩れた状態

「フレキシブルボックスにおけるOperaの問題点」の続きを読む→

フレックス/フロート表示結果

はじめに

当サイトをフレキシブルボックスレイアウト化した後の、各ブラウザーでの表示結果を掲載します。

IE10、Opera、Chromeは、フレキシブルボックスが使われています。IE9、IE8、IE7、IE6およびFirefoxは、フロートが使われています。

「フレックス/フロート表示結果」の続きを読む→

フレキシブルボックスレイアウトの構成

はじめに

先に掲載した、「フレキシブルボックスレイアウトのおさらい」の続きです。「フレキシブルボックスレイアウト」化を果たした当サイトですが、そのレイアウト構成から分析してみましょう。

サイトの主要ページは、以下のようなレイアウトを基に構成されています。

ボックス構成図
krzm.jp主要ページのボックス構成

これらのうち、topnav内のナビゲーションボタンと、メインコンテンツに当たるarticles・footnote・sidebarの三段組部分で、フレキシブルボックスレイアウトを使用しています。

もちろん、フレキシブルボックスレイアウト非対応のブラウザー(主としてInternet Explorer 9以下)でもレイアウトを再現するため、従来のfloatプロパティも維持しなければなりません。ですから、前提として、floatによるレイアウト構成を考えます。

「フレキシブルボックスレイアウトの構成」の続きを読む→

フレキシブルボックスレイアウトのおさらい

はじめに

以前、当サイトの「フレキシブル ボックス レイアウト」化を断念した記事を書きましたが、Windows 8とともにInternet Explorer 10も使うことができるようになり、なおかつWindows 7向けのIE 10も公開された今日、そろそろ時節到来ということで、当サイトのフレキシブル ボックス レイアウト化を実現してみました。その詳細は今後の記事で説明するとして、まずはフレキシブル ボックス レイアウトのおさらいをしておきましょう。

「フレキシブルボックスレイアウトのおさらい」の続きを読む→

フレキシブルボックスのメロディ ― CSSの無知への傾向と対策

はじめに

「不良少年のメロディ ― 愛の鞭への傾向と対策」は、The Kinksのアルバム「The Kinks Present Schoolboys in Disgrace」の邦題です。高校時代への愛惜、詰め込み式教育への皮肉などを謳い、RCA在籍時の最後のロック・オペラとなった、(知る人は知っている類の)傑作です。

不良少年のメロディ ジャケット写真

ちなみに、上の画像をクリックしても、どこかのショッピングサイトに繋がることはないので、安心してください。反商業主義の当krzm.jpサイトは、いわゆるアフィリエイトという小遣い稼ぎは行っておりません。

それはそれとして、この記事では、Kinksのアルバム名とその精神にちなみ、ボックスレイアウトの傾向と対策を、当サイトのデザイン設計などに絡めて解説していきます。

「フレキシブルボックスのメロディ ― CSSの無知への傾向と対策」の続きを読む→

krzm.jp:not(so-called mobile friendly)