Flexbox、よりエレガントなlayout_html/css_WEB-ITnose

先週末、北京大学の新本館の会議ホールで第 1 回 CSS 開発者カンファレンスが開催され、GitCafe のフロントエンド エンジニアである Jaych Su 氏が講演しました。会議では、よりエレガントなフロントエンド レイアウトである Flexbox が全員と共有されました。さて、彼に Flexbox について話してもらいましょう~

デザイナーの目には、植字作業は非常に単純なもので、左、中央、右、クリックするだけで、すべての要素が指定された位置に移動します。

しかし、植字のフロントエンド実装に関しては、そうではありません。

この方法では、行の高さを使用して垂直方向のセンタリングを行うなど、実際には使用されない多数の属性を使用する必要があることがよくあります。意味的には扱いにくいですが、例として line-height を取り上げます。これはもともと段落内の行間隔として使用されていましたが、この属性はテキストの上下のスペースを広げることができるため、垂直方向のセンタリングにも使用されました。では、Web レイアウトをより適切に実装する方法はあるのでしょうか?

これは Google の Angular です。彼らは数か月前に Angular でマテリアル デザインを実装するための UI を作成しました。このフレームワークがレイアウトを実装するために使用するメソッドは、以前の float ではなく、Flexbox です。

フレックスボックスとは何ですか? W3C による公式の説明では、これはより複雑なレイアウトを実現するために設計されています。私自身の定義では、Flexbox は本質的にボックス モデルの拡張であるということです。ボックス モデルは要素のボックス モデルを定義しますが、Flexbox はこれらのボックス モデル間の相互関係をさらに標準化します。レイアウトに使用すべきではない一部の属性をハッキングするために、非常に不正な方法を使用する必要はありません。

新しいもので遊ぶのが好きなフロントエンドの人間として、インターネットに接触するすべての人は新しいことを学ぶ必要があると言うべきです。

これらは、何か新しいことに出会ったときに私が常に自問する 3 つの質問です。

1. これで何ができるのですか?つまり、彼はどのような問題を解決できるのでしょうか?

2. どこで使用できますか?この方法はどこで使用できますか?

3. なぜ効果があるのですか?彼の実装ではどのようなロジックが使用されていますか?

次に、Flexbox を初めて見たときにこれら 3 つの質問を自問し、これまでに見つけた答えを共有します。

関数

例を挙げてください。すべてのフロントエンドが抱える問題点を中心に、以前はどのようにしてそれを達成していたのでしょうか?

これを確認する最も一般的な方法は、絶対位置を使用し、上と左を 50% オフセットし、マージンを使用してそれらを後方にオフセットすることです。ただし、これは固定サイズの要素に対してのみ機能します。

近年よく見られるアプローチは、中央に配置したい要素の前に要素を追加することです。古い IE を気にしたくない場合は、疑似要素を使用することもできます。コンテナーで text-align を使用し、下部の 2 つの要素をインラインにしてから、vertical-align を使用します。その利点は、基礎となる要素がコンテンツに応じてサイズを変更しても、どのように変更されても、常に垂直方向と水平方向の中央揃えを維持できることです。

もちろん、センタリングにはさまざまな方法があるので、一つずつ紹介しません。flex を使用してセンタリングする方法を見てみましょう。

Flex を使用してセンタリングを行う場合、本来この方法で使用されない多数の属性を使用せずに、簡単にセンタリングを行うことができます。コンテナを Flex コンテナとして指定し、justify-content を使用して水平方向の中央に配置し、次に align-items を使用して垂直方向の中央に配置するだけです。とてもシンプルかつエレガントにセンタリングできます。

それでは、もしかしたらこう言うかもしれませんね? 1つでよければ、もういくつか入れてもいいですか？実際にそれは可能です。

コンテナの下に 3 つの要素があるとします。これが Flexbox のもう 1 つの驚くべき機能です。

Flex コンテナーで、1 つの要素が 40%、もう 1 つが 12% であるとします。flex-grow 属性を設定している限り、その 3 番目の要素は、残りの空きスペースを埋めるために自動的に幅を調整します。コンテナ。また、複数の要素がある状態でも、それらを簡単に中央に配置することができます。

ここからわかるように、フレックスボックスはボックス モデル間の相対関係を標準化するために使用されると述べました。ここで、justify-content を space-around に設定すると、要素はスプレッド整列され、フレックス コンテナ内に分散されます。

段階的な要素に関して、さらにいくつかの例を見てみましょう。

最近見たウェブサイトです。その下にスライダーがあることがわかります。これはレイアウト上のフロントエンドにとって問題となることが多く、すべての子要素の高さを同じにする必要があります。以前は、CSS だけでこれを行うのは困難でした。

フレックスボックスを使用すると、CSS だけでこれを簡単に行うことができます。 flex コンテナに align-items を追加するだけです。これにより、コンテナの下のすべての要素が最も高い要素と同じ高さになるようになります。

元の最も高い要素にさらにコンテンツを追加したとしても、他の要素は確実に同じ高さを維持します。

互換性

Flex は、もともと 2009 年に W3C によって開発され、それ以来多くの議論が行われてきました。たとえば、指定された要素が flex コンテナの場合、最初のバージョンは display:box、2 番目のバージョンは display: flexbox、3 番目のバージョンは display: flex になります。幸いなことに、オープンソースの世界では、これら 3 つのバージョンの flex がいくつかのミックスインとして作成されており、それらを使用する場合は、それらを含めるだけで済みます。

IE の経験と同様に、すべての良い点は基本的に IE と互換性がないため、IE ユーザーを考慮する必要がある場合は注意してください。そのため、IE に残された唯一の機能は Chrome と Firefox をダウンロードすることであると言う人もいます。

原則

インターネットで flex を検索すると、ほとんどがその配置と DOM 順序の制御のしやすさに焦点を当てます。しかし、今日は、より深い内容、フレックス項目の幅の計算についてお話したいと思います。ほとんどの場合、幅の計算についてはあまり議論されないのですが、より正確な To が必要な場合に使用します。項目の表示幅を制御するには、実際には項目の幅がフレックス コンテナーでどのように計算されるかを理解する必要があります。

コンテナをフレックス コンテナとして指定すると、その中の項目には実際には次の設定があります: flex: 0 1 auto

これら 3 つの数字は実際にはそれぞれ flex-grow、flex-shrink、flex-basis を表します。これら 3 つの属性が flex がスマートである理由と言えます。

まず flex-basis について説明します。flex コンテナが水平の場合、このプロパティは実際には flex: 0 0 480px と指定したときの幅になります。幅を 480px に設定します。しかし、これだけでは flex の何が特別なのかがわかりませんか?幅を繰り返し設定する必要があるのはなぜですか?

今回は、他の 2 つの属性: flex-grow と flex-shrink について説明します。

これら 2 つの属性は実際には双子であり、grow は、 item コンテナよりも小さい場合、アイテムがコンテナに収まるように各アイテムの幅が大きくなります。基準が 100px のアイテムが 3 つあるとします。左から右に 3、2、1 の成長値を与えるので、フレックスが適用されると、一番左の項目の実際の増加幅はどれくらいになるでしょうか?画像から、増加した幅は 90px であると計算できるため、最後の左端の項目の幅は 190px になります。

成長と縮小は実際には双子であると述べましたが、実際、縮小とは、アイテムの幅の合計がコンテナーよりも大きい場合を意味します。アイテムをコンテナに埋め込みます。それぞれのアイテムの幅が縮小されます。ただし計算式は異なります。なぜ？加算する場合は関係ありませんが、減算する場合は、割り当てられた縮小値のみを計算すると、最終的な縮小の幅が基準よりも大きくなる可能性が非常に高いため、項目の幅はマイナスの値になります。では、どうやって修正すればよいのでしょうか？縮小幅が常に基礎よりも小さくなるように、パラメータとして基礎を計算します。したがって、左端を例として修正された式を取得し、最終的に 60 ピクセルの縮小を計算して、アイテムは 140 ピクセルになります。上記が使いにくくても問題ありません。実際、最も一般的に使用されるのは flex: 1 です。

この時点で、あたかもこれが非常に強力であるかのように話しましたが、Flexbox が本当に優れていることを最も早く、最も簡単に、そして最も大雑把に伝える方法はありますか?

うーん⋯⋯少し難しいですが、できるはずだと思います。