CSS3 のフレックスボックスが水平方向、垂直方向の中央揃え、および 3 列の同じ高さのレイアウトを実装する方法

最近はcssとcss3の基礎知識を補っていますが、Webページを開いたところ、Firefoxのデフォルトのホームページにこんなものがあることを発見しました。

最初の css 属性がわかりませんでした。それ以来、私は情報を探したり、さまざまな本を読んだりするようになりました。最近、私はフレックスボックスについて簡単に紹介する目的で、CSS3 格納式レイアウト ボックス (フレックスボックス) モデルについての理解についてブログ記事を書いています。

以下のコンテンツは次のサブセクションに分かれています:

1. CSS3 のフレックスボックスについてマスターする必要がある概念

2. Flexboxは水平方向と垂直方向の中央揃えを実現します

3. 同じ高さの 3 つの列が適応され、フッター領域は下部のレイアウトに接着されます

1. CSS3 のフレックスボックスについて知っておくべきこと

3 列の等しい高さのアダプティブ レイアウトと水平方向と垂直方向の中央揃えには、CSS3 のフレックスボックスの基本概念をある程度理解する必要があるため、後続の例への道を開くために、フレックスボックスの概念について簡単に説明します。私は、どんな知識を学ぶとしても、概念を理解することが非常に重要であると常に信じてきました。

a: フレキシブルコンテナ: 表示属性を通じて要素をフレックスまたはインラインボックス(標準バージョン)に設定することを指します。このコンテナはフレキシブルコンテナです。

b: フレキシブルアイテム: フレキシブルアイテムは、フレックスコンテナの子要素です。フレックス コンテナのコンテンツには 0 個以上のフレックス アイテムが含まれます。フレックス コンテナの各子要素はフレックス アイテム (テキストを含み、匿名フレックス アイテムと呼ばれます) になります。

c: 伸縮流方向: 伸縮コンテナ内の主軸方向を指し、x 軸の方向として理解できます。スケーラブル フローの方向は主に flex-direction 属性 (標準バージョン) によって設定され、デフォルト値は行です。

d: フレキシブルラインラッピング: フレキシブルコンテナ内で、フレキシブルアイテムがフレキシブルコンテナからはみ出すことがあります。フレックス コンテナーのプロパティでは、flex-wrap プロパティは主にフレックス コンテナーをラップするかどうかを設定するために使用されます。デフォルト値は nowrap です。

e: スケーラビリティ: フレックス項目を定義すると、利用可能なスペースを満たすためにフレックス コンテナーの幅または高さを変更できます。フレックス コンテナ内の追加スペースをフレックス項目に割り当てたり、フレックス項目のオーバーフローを防ぐために縮小したりできます。

2. Flexboxは水平方向と垂直方向の中央揃えを実現します

リーリー

リーリー

まず、htmlとbodyの幅と高さを100%に設定します。そうしないと、サイド主軸揃え（box-pack）とサイド軸揃え（box-align）が行われます。コンテナー用の追加スペースの前に、スケーラブルなアイテムを配布したり撤回したりすることはできません。

次に、ボディをスケーラブルコンテナにして、表示属性をboxに設定し、主軸の配置と交差軸の配置を制御するbox-packとbox-alignを設定し、その属性値をcenterに設定します。

最後に、.content 要素がフレックス コンテナになり、その内部のテキスト ブロックが匿名のフレックス アイテムになります。現時点では、.content 要素はスケーラブルなコンテナーであり、スケーラブルなプロジェクトでもあります。スケーラブルなコンテナとして使用される場合、h1 要素はそのスケーラブルなアイテムとなり、スケーラブルなアイテムとして使用される場合は、本体がそのスケーラブルなコンテナになります。また、.content の box-align と box-pack を設定して、交差軸の配置と主軸の配置を制御します。

レンダリングは以下のようになり、.cotent要素もh1も中央に縦横に並んでいます。

3. 同じ高さの 3 つの列が適応され、フッター領域は下部のレイアウトに接着されます

3カラムレイアウトは、float＋パーセント幅の組み合わせや、インラインブロックとパーセンテージを併用するなど、色々な方法がありますが、フッターを一番下に貼り付けるようなレイアウトは実現が困難です。ブラウザのビジュアルウィンドウ。ここでは、CSS3 の 3 列の等高レイアウトのみを紹介します。

どんなレイアウト効果もHTML構造がなければ実現できません。

リーリー

ヘッダーとフッターの幅が100%、左右の列の幅が200px、メインコンテンツが幅に適応していると仮定します。

リーリー

ここで本文のbox-sizingを設定する目的は、ボックスモデルの幅=コンテンツの幅+境界線+パディングにし、パディング値を設定するときに幅の幅を計算する必要を避けることです。

次に、スケーラブル レイアウト ボックス モデル ボックス (古いバージョンも使用できます) を使用して #page 要素をスケーラブル コンテナーに設定し、子要素をスケーラブルにし、スケーラブル コンテナーの残りのスペースに適応できるようにします。

リーリー

　　上面代码中，使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width，这里的#main元素的box-flex属性会失效，原因在于父容器没有宽度，自然无法填充伸缩容器的额外空间，（这里的额外空间指的是#page元素所占的面积，而不单单指宽度）。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器（Chrome，Safari）和Gecko内核（Firefox）不支持box-flex属性和box属性，所以必须添加厂商前缀。

　　上面实例中，需要修改一下主内容和左边栏，右边栏的排列方式，使用box-ordinal-group属性。

<span style="color: #800000;">#sidebar-right </span>{<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;
}

　　上面代码中，使用了box-ordinal-group属性，这个属性是用于修改伸缩项目在伸缩容器中的显示顺序，默认值为1，也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。

　　至此，这个页面就已经做好了。但是出现了一个问题，就是页脚区域不会黏附在浏览器窗口可视区域底部，这让用户体验非常糟糕。

　　使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器，并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性（也就是#page元素）。也就是说，页脚区域前的div会变成一个伸缩项目，会根据伸缩容器的高度自适应填充伸缩容器的额外空间，也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

　　如果希望整个页面的布局要和浏览器窗口可视区域一样高，

　　首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置，body本身就没有高度，当然伸缩项目的伸缩性也就无法体现。

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;
}

　　其次，让body元素自身成为一个伸缩容器，并且设置伸缩流方向（box-orient）为vertical（旧版本中的属性）。

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}

　　最后，设置页脚区域前的div（#page元素）中的box-flex属性，让其根据伸缩容器（这里是指body）的高度自适应伸缩容器body的额外空间，也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> stretch</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> stretch</span>;
}

　　上面代码中，#page元素本身是一个伸缩容器，现在变成伸缩项目。在伸缩布局盒模型中，伸缩项目在侧轴的对齐方式box-align（旧版本）默认值为stretch，（css中可不写box-align属性）致使#page元素的三个伸缩项目都会自动拉伸，不管内容高度有多少都具有伸缩容器#page的高度，从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

　　

 

 

完。

 

 

感谢大家的阅读。