CSSスティックを作る

こんにちは友人!今日、私たちはCSSのFlexboxについてレビューします.
掘りましょう!

フレックスボックス
flexboxが存在する理由は、コンテンツのレイアウトをカスタマイズしやすくするためです.
flexboxを使用すると以下の利点があります.

フレックスコンテナでフレックスアイテムを作ることができることは、同じサイズ(高さで)を持っていて、彼らの固有のサイズについて気にする必要はありません.

最も簡単な方法でフレックス項目の位置をカスタマイズします.

今までにこのCSSを見たことがありますか?

flex: 1 100px;

詳細は上記のCSSです.

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;

今以上の詳細にプロパティCSSを発見しましょう!

フレックス・ベース
このプロパティを要素の幅マイルストーンとして考えることができます.要素の最小幅を設定し、幅を小さくすることができます(要素の最小最小サイズ)、またはCSSを設定した状況に依存します.
まずは一目見てみたいmin-content and max-content CSSで.
以下に使用するコード例を示しますmin-content and max-content :
そうすれば、

min-content sets the width of the element as the longest word's width. In the example above, it's "content"'s width.

max-content sets the width of the element as the total width of text content. In the example above, it's "Max content" 's width.

概念を理解するために以下の例を使っています.

フレックスベース
上の最初の例ではflex-basis: 0 項目要素については、項目の幅をmin-content 値.

The flex item can be shrink at least min-content size of the text content.

フレックスシュリンク
上の2番目の例では、親要素を100px , アイテム要素flex-basis: 200px . それはflex-shrink: 0 項目幅は親要素幅よりも広くなります.あなたは設定できますflex-shrink: 1 項目の幅は親要素と同じです.それは、フレックスアイテムが100px .

The flex item can be shrunk in case its width is greater than the parent element width.

フレックスグロー
上の3番目の例では、

flex-basis: 50px;
flex-grow: 1;

フレックスアイテム.アイテム幅は、それより広くなりました50px , この場合、アイテム幅を配布して、それを育てました.あなたは設定できますflex-grow: 0 そして、アイテム幅は正確になります50px .
使えますfirefox あなたのフレックスアイテムが振る舞うものを見るために.

上の4番目の例ではflex-grow: 2 要素の3番目です.ご覧のように、3番目のアイテム幅は、第1および第2アイテムより広くなりました.

It means the remain size will be distributed based on the value of flex-grow that we set for each the flex item.

結論
CSSでFlexboxを見直しました.なぜあなたの自己の明るいレビューを取ることはありません.私はあなたと共有したいMake it stick 学習の容易さを支援する方法.