css flex 1弾

カエル遊びに行く
フロントを勉強している人はこのゲームがスパイであることを知らない.私が勉強を始めたときもflexがあったのを覚えています.私もこのゲームでflexを簡単にマスターしました.
最後のステージは難しそうですが….
レイアウトの際、規格の正確な理解がなく、ゲームのように機械のようによく使う属性だけを使ってflexを使います.理解と使用の趣旨から、宣伝を行うことにした.
もっと深く知っていれば、いつも些細な違いをもたらす.Flexをもっと使いましょう!

1. flex

flexはレイアウトのためだけに生まれた特別な子供です.flexが出現する前に、主に従来のレイアウト方法float、inline-blockを用いてレイアウトを行った.しかし、レイアウトのプロパティではないので、バグがあります.inline-blockを使用すると、娯楽は空白と認識され、画面に微細な空白が生じる.floatはclearfixクラスを単独で適用する必要があるか、overflow:hiddenなどの属性で単独で処理する必要があり、使用するのが面倒である.
この問題を解決したのはflexです.
float属性と比較して、赤色の幹部も見られるが、IEは間もなくサービスを終了するため、現在ではほとんどがflexを支持している.

今は便利で強力なflexをたくさん使いましょう.

2. display : flex

まず、flexは基本的に親容器と子要素に分けられる.

<div class="flex-container">
  <div class="flex-item">CristianoRonaldo</div>
  <div class="flex-item">messi</div>
  <div class="flex-item">Sonheungmin</div>
</div>

子供全体を包んだ子供たちをflex-itemと呼ぶ.簡単です.display:flexは親に与える要素の属性である.
適用後、

これによりfloat:leftを用いたソートのような効果が得られる.clearfixをしなくても便利です
また、floatに配置すると、自分が持っているコンテンツの高さだけを占めることになり、flexは親容器の高さに応じて引き裂きの効果を確認することができます.

私はあまり使ったことがありませんが、display : inline-flexもあります.その名の通りフレキシブルコンテナの形態はinlineである.
flexの横のテキストは下向きですが、inline-flexが横にあることが確認できます.
片付けてください.

display:flexは親をブロック要素にし、子供は自分の持っているコンテンツの幅だけを占め、インラインのように配置されます.

display:inline-flexは子供をflexと同じ動作にし、親コンテナはinlineプロパティ

を表示します.

3. flex-direction

flex-directionプロパティは、ソート方向を決定します.

.flex-container {
   display: flex;
   flex-direction: column;
   /* flex-direction: row; */
   /* flex-direction: row-reverse; */
   /* flex-direction: column-reverse; */
}

デフォルトのプロパティはrowで、columnに変更すると、このように垂直に並んでいることが確認されます.何か違いがあるとすれば、サブエレメントはblockプロパティを維持しながらソートされます.

4. flex-wrap

サブエレメントがコンテナより長い場合にどのようにソートするかを決定します.デフォルトはflex-wrap : nowrapなので、溢れても落ちません.

ご覧のように、左右にスクロールが発生します.下に落としたいならwrapを試してみてください.

.flex-container{
  flex-wrap : nowrap;
}

5.反応型

簡単な反応型の例を作成します.600 px以上を超えると、上から下に並ぶレイアウトがinlineのようになります!

@media (min-width: 600px) {
  .flex-container {
     display: flex;
     flex-direction: row;
  }
  .flex-item {
     flex: 1;
  }
}

flexは想像以上の量を持っています...
何度も断ち切って宣伝するみたい
[参考資料]

1分エンコーディング