Flexbox Frogyとは?

CSSコードゲームでFlexboxの属性を入力すると次の段階に進みます.

Flexboxのプロパティに詳しい

🐸 FLEXBOX FROGY体験!

Flex box(Flex box)の概念

一般に、ウェブレイアウトは、CSSにおけるdisplay、float、positionなどの属性を使用して実装される.しかし,この属性の実装方法は非常に複雑であり,レイアウトを表す上で大きな限界がある.
実施が困難なレイアウトを簡略化するため、CS 3にはレイアウト方式Flexboxが追加されている.flexboxでは、要素のサイズと順序を柔軟に配置できます.

FlexboxはCS 3の新しいレイアウト方式であり、ビューポートや要素のサイズが明確でない場合や動的に変化した場合でも効率的に要素を配置、並べ替え、分散する方法を提供します.flexboxの利点を一言で要約すると,「複雑な計算を必要とせずに要素の大きさや順序を柔軟に配置できる」といえる.整列方式、方向、順序、サイズを柔軟に調整できるため、個別の分岐処理を低減し、CSSにより異なるレイアウトを実現することができる.

flex boxの構成

flexboxは、複数のサブエレメントflex itemとその親エレメントflex containerから構成されます.

flexboxを作る方法は簡単です.ソートする要素の親要素について、次のようにdisplay: flexの属性を宣言できます.

.flex_container {
  display: flex;
}

display:flexプロパティに適用される要素はflexコンテナとなり、flexコンテナのサブ要素はflex itemとなります。flex containerとflex itemは、親要素と子要素のセットとしてulとliを使用することを考慮すると、簡単に理解できます。

flex itemは主軸(mainaxis)で並べ替えられます.主軸の方向はflex containerのflex-directionプロパティによって決まります.flex-directionプロパティが指定されていない場合は、デフォルトの行が適用されます.アトリビュート値rowは、主軸の方向を左から右に流します.flex-directionプロパティの別のプロパティ値columnは、主軸の方向を上から下に流します.

親要素と子要素で定義された属性の区別

flexboxで使用するプロパティは、親要素flexコンテナで定義されたプロパティと、サブ要素flexitemで定義されたプロパティに分けられます.全体的なソートまたはストリームに関連するプロパティはflexコンテナで定義され、サブ要素のサイズまたは順序に関連するプロパティはflex itemで定義されます.重要なのは、それを別々に適用することです.

-flex containerプロパティ

-flex itemプロパティ

Flexboxサポート範囲(ブラウザ互換性)

IEでは9以下のバージョンはサポートされておらず、10,11でもエラーが発生している.
Firefoxは27バージョン以下でバグがあります.
Cromeは20バージョン以下、Safar 6バージョン以下でバグが存在する.
逆に、ほとんどのモバイルネットワークは良いサポートを提供しています.サービスでサポートされているブラウザに応じて、適切に使用すればいいです.
Can I useサイトの「flex」検索結果
css-flexを習い始めたばかりの頃は本当に混同していましたが、どんな感じだったのでしょうか.
感じましたが、頭の中には具体的に描かれていません.
MDNやw 3 schoolなどのサイトで基本コンセプトを精読しても、足りない感じがします.
そしてFLEXBOX FROGYという面白いゲームを見つけました.
ゲームは第24期までクリアして、だんだん頭の中で描いた感じがします!
このゲームをプレイした後、flexに関する多くの文章を再び読んで、何なのかを正確に知りました:D
.Reference
https://flexboxfroggy.com/#ko
https://developer.mozilla.org/ko/docs/Web/CSS/flex
https://velog.io/@sukong/WEB-Flexbox-Froggy-%ED%92%80%EC%9D%B4#-flexbox-froggy%EB%9E%80-
https://d2.naver.com/helloworld/8540176