Flexbox_html/css_WEB-ITnose を使用する 6 つの理由-htmlチュートリアル-php.cn

Flexbox_html/css_WEB-ITnose を使用する 6 つの理由

WBOY

リリース： 2016-06-24 11:25:09

オリジナル

1069 人が閲覧しました

先週 Twitter でこの質問をしたところ、50% 以上の人が「はい」と答えたことに驚きました。私は最近までどのプロジェクトでもフレックスボックスを使用したことがなかったので、私だけがそうするに違いないと思っていたので、驚いています。

私はいくつかの理由からフレックスボックスを使用しません。しかし、いくつかの調査の後、私の懸念は大幅に軽減され、移行を開始しました。ここでは、Flexbox の使用を開始すべき 6 つの理由を紹介します。

すべての主要なブラウザでサポートされています

私がまだ Flexbox を使用していない主な理由は、ブラウザのサポートが不足しているためだと思います。しかし実際には、Flexbox は世界中のブラウザで 95.89% の率で十分にサポートされています。 IE 10 以下を考慮しない場合、この数字はさらに高くなる可能性があると Microsoft は述べています。

Flexbox は、現在でも使用している 2D 変換 (91.85% サポート) や、position:fixed (92.98% サポート) などの他の機能よりも高いサポートを持っています

構文については心配しないでください

ただし、最新バージョンです。すべてのブラウザのうち 8 が Flexbox の現在の構文をサポートしていますが、古いバージョンのサポートはどうなっているのでしょうか?半年以上文法が変更されているため、文章に矛盾がある部分があります。すべてのブラウザーの最後の 2 つの現行バージョンをサポートするには、異なるベンダープレフィックスを使用して、各ルールの少なくとも 4 つの異なるバージョンを作成する必要があります。

この問題に関して、私の解決策は autoprefixer を使用するだけです 。どのベンダープレフィックスを使用するのが最適かを追跡するのに時間と労力を費やす必要はないため、自動化されるように設定する必要があります。

オートプレフィックスを使用すると、サポートしたいブラウザのバージョンを指定でき、対応するベンダープレフィックスが自動的に追加されます。

/* Write this */.flex-container {  display: flex;}/* Compiles to this (with autoprefixer set to support last 2 versions of all browsers) */.flex-container {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;}

ログイン後にコピー

簡単に始められます

確かに、フレックスボックスについてすべてを学ぶのはそれほど簡単ではありません。 12 の新しいプロパティがあり、それぞれに約 4 つの潜在的な値があります。もちろん、少しずつ理解してマスターすることはできます。

ただし、すべてのプロパティを知る必要はありません。多くの場合、使用する必要があるのは 3 つのプロパティだけであることがわかったためです -

display : 要素をインラインまたはブロックフレックスボックスコンテナー要素として設定します
justify-content : フレックスコンテナー内の項目の水平方向の配置を制御します (フレックスの場合) flex のデフォルトのプロパティは row または row-reverse です)
align-items: flex コンテナ内の項目の垂直方向の配置を制御します (flex のデフォルトのプロパティが row または row-reverse の場合)

これらのプロパティは、次の場合にのみ使用してください。フレックスコンテナに適用すると、多数の異なるレイアウトを生成できます。関連する知識についてさらに詳しく知りたい場合は、学習に役立つ豊富なリソース/属性リスト/例もあります

Flexbox 中国語チュートリアル
Flexbox Playground: 各属性と値のペアの役割を確認できるオンラインドキュメント
フレックスボックス完全ガイド (CSS ヒント) : すべてのフレックスボックスの概要
フレックスボックスフロッギー : CSS フレックスボックスを学ぶためのゲーム
フレックスバグ : フレックスボックスの問題とクロスブラウザーでの修正方法のリスト
柔軟性 : 1古いブラウザをサポートするポリフィル

要素のセンタリング

フレックスボックスの優れたブラウザサポートに加えて、要素の水平方向および垂直方向のセンタリングも簡単に実現できます。

たった 3 つの宣言で、子要素の完全な中央揃えを実現できます:

.flex-container {  display: flex;  justify-content: center; /* horizontal centering */  align-items: center; /* vertical centering */  border: 2px dashed #000;}

ログイン後にコピー

インライン要素の操作が簡単になります

インライン項目の配置に関する悪名高い問題は、余分な 4 ピクセルのマージンです。この問題にはフローティング要素などの解決策がありますが、いつでも新しい問題が発生する可能性があります。

Flexbox を使用すると、インライン要素を簡単に処理できます。要素の整列を実現できます:

.flex-container { display: flex; }.flex-item { width: 20%; }

ログイン後にコピー

アイテム間の均一な分散を実現できます

.flex-container {  display: flex;  justify-content: space-around;}

ログイン後にコピー

:first-child または :last-child を処理せずにこれを行うこともできます。の場合、達成します。リスト項目の均一な分布:

.flex-container {  display: flex;  justify-content: space-between;}

ログイン後にコピー

複雑さを簡素化する

Flexbox が作成された理由は、まず、可能な限り少ない宣言で複雑なレイアウトを作成できるようにするためかもしれません。

前の例では、フレックスコンテナースタイルを設定することによってのみ実装しました。ただし、flex 項目を設定することで、より詳細なスタイル調整を実現できます。たとえば、価格表の一般的なレイアウトは次のとおりです。

ここには 3 つの div があり、中央の div は側面の 2 倍の幅です。フレックスボックスを使用してこのレイアウトを実現するには、次のように記述できます。

.flex-container {  display: flex;  align-items: center;}.flex-items:not(:nth-child(2)) {  flex-grow: 1;  height: 300px;}.flex-items:nth-child(2) {  flex-grow: 2;  height: 350px;}

ログイン後にコピー

Felxboxについては、私の認識が非常に遅くなってしまったのですが、今でも考えが変わっていない方もたくさんいると思います。フレックスボックスをまだ使用したことがありますか? まだ使用していない場合は、試してみる価値がありますか?

この記事は @ireaderinokun の「6 Reasons to Start using Flexbox」をもとに翻訳したものであり、翻訳全体に私たちの独自の理解や考えが含まれておりますので、翻訳が不十分な場合や間違っている点がある場合は、業界の友人にアドバイスを求めてください。この翻訳を転載したい場合は、英語の出典を明記してください: http://bitsofco.de/6-reasons-to-start-using-flexbox/。