あなたが知っていなければならない4つのFlexboxトリック

15248 ワード

インタラクティブなチュートリアルhere
あなたがFlexboxで握りを得ようとしているならば、ここではあなたのために実用的なチュートリアルです.いいえクラップ、綿毛、あなたが知る必要があるだけで非常に重要な実用的なトリック.

1 .要素を完全に集中する方法
ここで心に浮かぶ最初のことは、「ねえ、それは達成するのがとても簡単です」.でも?
下のマークアップを考えてください.
かなり簡単.それは本質的にちょうどドキュメントにイメージを置くことです.

<!doctype html>
<html lang="en">
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
</body>
</html>

誰も醜いデザインが好きです.それで、我々は進んで、文書全体を与えますbackgound-color .

body {
  background-color: #f1c40f;
}

以下は我々が今持っているものです.
HTML

<!doctype html>
<html lang="en">
  <head>
    <title>Centering with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
</body>
</html>

CSS

html,
body {
    width: 100%;
  height: 100%;
}
body {
  margin: 0;
  background-color: #f1c40f;
}

出力

それで、ドキュメントの中心にイメージを完全に集中させましょう.
ファースト・ステップbody 要素Aフレックスコンテナ.

body {
  display: flex
}

十分簡単.今、我々は完全にイメージを整列させるかもしれません.

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

Voila!イメージは完全に中心的です.上のコード一覧で3 and 4 物事を行う魔法の杖です.

現在、イメージは中心に整列されます.
完全なコード解決は以下で見られます.ご希望の場合は、コードで遊ぶことができますhere . あなたは強調表示された行を取ることができるし、どのように個別にディスプレイに影響を参照してください.
HTML

<!doctype html>
<html lang="en">
  <head>
    <title>Perfeclty centered image</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="150px" />
</body>
</html>

CSS

html,
body {
    width: 100%;
  height: 100%;
}
body {
  margin: 0;
  display:flex;
  background-color: #f1c40f;
  justify-content: center;
  align-items: center;
}

粘着性のフッターを作る方法
今しばらくの間CSSを書いているなら、私はあなたがこの問題を認識すると確信しています.
ページが粗い内容であっても、ページの下部にあるページのフッターを保つのは、首の痛みです.喜んで、Flexboxで解決策があります.
次のマークアップを考えます.

<!doctype html>
<html lang="en">
  <head>
    <title>Sticky footer</title>
  </head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

これは、基本的なページのセットアップheader , 地域main 内容、およびfooter .
ページの各セクションが区別できるように、先に行き、異なる背景色を与えましょう.

header {
  background-color: #27ae60;
}

main {
  background-color: #3498db;
}

footer {
  background-color: #c0392b;
}

現在、ドキュメントの本体がスクリーン全体を満たすことを確認します

body {
  min-height: 100vh;
}

技術的にはline 2 最小の高さを確認してくださいmin-height ) 本体要素のビューポート高さの100 %ですvh )”
viewportという用語は、Webページのユーザーの可視領域を指します.
さあ、make makeをしましょう

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

上のコードでline 3 Flexboxモデルを初期化します.And line 4 ?
デフォルト値flex-direction is row .flex-diection:column 方向を変えるhorizontal to vertical .
子要素header , main and footer 垂直に整列
スイートスポットに移動します.与えるfooter and header 固定高さ.

header, footer {
  height: 50px;
}

そして最後に、フッタを粘着性にする.

main {
  flex: 1 0 0;
}

私は、我々が目標になることになっていたと思いましたfooter , ではなくmain ?
はい、しかし、我々がフッター粘着性を作る方法は、作るためにブラウザーを指示することですmain 画面上のすべての利用可能なスペースを取る.
この葉header and footer 自分自身の高さにmain 利用可能な残りのスペースに合わせて成長します.
覚えているならflex: 1 0 0 は、“使用可能なスペース全体に合うようにコンテナを成長させる、初期の幅をゼロに保つし、アイテムを縮小しないでください”
ここでも、完全なコードがあります.
HTML

<html lang="en">
  <head>
    <title>Sticky footer</title>
  </head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

CSS

header {
  background-color: #27ae60;
}

main {
  background-color: #3498db;
}

footer {
  background-color: #c0392b;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  height: 50px;
}
main {
  flex: 1 0 0;
}

ジャバスクリプト

$(document).ready(function () {
$('#content').html('<span>Hello World!</span>');
});

出力

Flexboxで基本グリッドを作成する方法
ユーザインタフェースは複雑になる.チャンスは、いつか、幅を変えているセクションをつくるのに必要であるでしょう.
この例では、以下の2カラムレイアウトのような複数の列レイアウトを持つページが含まれます.

以下の基本的な設定を考えてください.

<html lang="en">
  <head>
    <title>2 column layout</title>
  </head>
<body>
  <aside></aside>
  <main></main>
</body>
</html>

だから、我々はaside とmain タグ.The aside の間、サイドバー要素を含みますmain タグは、ページの主要な内容を収容します.
この問題を解決するために、いつものようにbody フレックスコンテナ.

body {
  display: flex;
}

レットbody ユーザのビューポートを埋める

body {
  min-height: 100vh;
  display: flex; 
}

ソリューションのスイートスポットに.
両方の幅を指定するaside and main .

aside {
  background-color: #2c3e50;
  width: 200px;
}

main {
  background-color: #c0392b;
  flex: 1 0 0;
}

Line 3 サイドバーセクションの幅を200px . 十分簡単.Line 8 集合main 利用可能な残りのスペースを取るためのセクション200px )
覚えてflex: 1 0 0 “利用可能なスペースにフィットし、縮小しないでください.”
以下にその結果を示します.
HTML

<html lang="en">
  <head>
    <title>2 column layout</title>
  </head>
<body>
  <aside></aside>
  <main></main>
</body>
</html>

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
}

aside {
  background-color: #2c3e50;
  width: 200px;
}

main {
  background-color: #c0392b;
  flex: 1 0 0;
}

いつものように、あなたまでのコンセプトをマスターしていないtoy with the code . どうぞ

Flexboxでメディアオブジェクトを作成する方法
メディアオブジェクトとは
正直なところ、私はそれに非常に技術的な答えを持っていると確信していません.以下に例を示します:

だから、それだけで画像側の側のテキストの束ですか?
まあ、ソート.
しかし、判断するのが速いでないでください.あなたは、多くのサイトがこれを実行するかについて驚くでしょう.例えば、普通のつぶやきを見てみましょう.

何を見ますか.メディアオブジェクト!
flexboxを使ってビルドしましょう.
次の基本的なマークアップを考えます.

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>

それで、我々はイメージと主な内容域で我々の基本的なセットアップをします.
これは次のようになります.
HTML

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>

出力

作成してFlexboxモデルを開始するbody フレックスコンテナ.
その結果は以下の通りです.
HTML

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="200px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>

CSS

body {
  display: flex;
}

出力

はい-それは恐ろしいように見えます.
像は垂直軸に合うように伸張される.デフォルトでは、align-items がstretch .
それを変えましょう.
HMTL

<html lang="en">
  <head>
    <title>Media object with Flexbox</title>
  </head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="100px" />
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
  </main>
</body>
</html>

CSS

body {
  display: flex;
  align-items: flex-start;
  background-color: #8cacea;
  color: #fff;
}

img {
  margin-right: 1em;
}

出力

今私たちのメディアオブジェクト-完璧な整列している.あなたは、私がそこで若干の色を入れるのに気がつきました.
いつものように、あなたはコードをおもちゃまでのコンセプトをマスターしていない.それは、このインタラクティブな記事の全体のポイントです.
戻ってください、あなたが減算し、追加し、コードの周りを再生することを確認してください-あなたは何を行うことができます!

結論
私は本当にあなただけでなく、このチュートリアルを開始したが、それを完了してうれしいです!
それで、あなたは今何をするつもりですか?
コードをマスターし、それをマスターし、いくつかの信じられないほどのUIを構築してください!
時間をかけて、どのように役立つこれらのトリックが表示されます.ハッピーラーニング!

Reference

この問題について(あなたが知っていなければならない4つのFlexboxトリック), 我々は、より多くの情報をここで見つけました https://dev.to/educative/4-flexbox-tricks-you-must-know-4904

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

本当にビット演算ができますか?Android SDKプログラマーがどう書いたか見てみましょう!

ランゲージページの作成