フレックスボックス:フレックスコンテナとフレックスアイテム

3492 ワード
html codenewbie css テキストリンク
写真でchuttersnap on Unsplash
Flexboxは私に贈与されています.それは私のCSSゲームを上回り、私はウェブサイト上のものを位置決めする上でより大きな制御を許可した.
フレックスボックスを使用して起動するために理解する必要がある最初のことは、フレックスコンテナとフレックスアイテムです.
これらを理解することは、flexboxを使うことの基礎です.
どのようにコンテナやアイテムの仕事を助けるためにこのように考える.
我々があなたの家に入るならば.
部屋では家具の種類を配置します我々は、引き出しの引き出し、サイドボード、ワードローブがあります.
家具のこれらの作品では、我々は異なる項目があります私たちはパンツと靴下を持っています.もう一つは私たちの服を着ています.
家具は、我々は部屋のさまざまな部分に配置することができます.そして家具では、アイテムが配置されて配置されている方法です.
これはFlexboxがウェブページ上でどのように動作するかに似ています.
この例の部屋はウェブページです.家具は、Webページを構成するさまざまなコンポーネントですNavbar、ギャラリーや機能セクションなど.
そして、家具のオブジェクトは、構成要素を構成するアイテムです.
それで、Navbarは会社ロゴとリンクで無順序のリストで構成されることができました.
ギャラリーは5画像で構成することができます.
そして、機能セクションは異なるカードでできていて、それらの範囲内でヘッダーテキストとボディーテキストでありえました.
フレックスボックスとフレックスアイテムがどのように振る舞うかを知ることで、フレックスボックスを理解するのに役立ちます.
フレックスボックスの力を持っているので、何を設定するか、調整して、それらを取り、容器に入れておくことは、すべてについてです.
Navbarの例を取りましょう.これが私たちが目指している結果です.ナビゲーションのための左とリンクの右側のロゴを持つNavbar.

この例では、部屋はウェブページです.我々がこの部屋に置いている家具は、我々が我々の容器のために使っているものです.そして、アイテムはロゴとNavリンクです.
Navbar(容器)内のロゴとNAVリンクの位置決めを制御したい.
単にこれをするために、我々はNavbarのこのCSSでFlexを表示することによってFlexboxコンテナにNavbarを回します.
nav {
  display: flex;
}
これにより、FlexiboxのさまざまなプロパティをFlexコンテナに適用してコンテナー内の項目を配置する権限が得られます.
Navbarの例では、Align項目のプロパティを適用してNavbar内の項目を中心に揃え、コンテンツプロパティを指定して項目間のスペースを適用します.
私たちは他のいくつかのCSSスタイルを追加しました.そして、リストアイテムがFlexiboxのコントロールの下にあるように、我々は規則的なリストにもう一つのflexコンテナを作成さえしました.
nav {
  background-color: #2a2a2a;
  color: white;
  display: flex;
  font-size: 1.5em; 
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-left: 1em;
}
フレックスコンテナとフレックスアイテムへのこの導入がFlexboxを使用しているあなたの目立つのに役立つことを望みます.
私は最近Flexboxと呼ばれるFlexboxと呼ばれる無料の本をリリースしました:あなたが持っているかもしれないFlexboxの上でいくつかのより多くの質問に答えるのを助けることができる最も一般的なFlexbox質問への答え.
あなたは私のウェブサイト上で無料コピーをダウンロードすることができますwww.craigdennis.me
フルコード
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Navbar</title>
  </head>
  <body>
    <nav>
        <div>MY LOGO</div>
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
      </ul>
    </nav>
  </body>
</html>

nav {
  background-color: #2a2a2a;
  color: white;
  display: flex;
  font-size: 1.5em; 
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-left: 1em;
}
[react]仮想dom/dom/要素ツリー
CleanCode 7章エラー処理