CSSレイアウト、セレクタ

2689 ワード

CSS Flex id class テキストリンク

クラス名と実装の一貫性は1:1

である.

.w70 { width: 70%; }
.h40 { height: 40%; }

HTMLドキュメントの初期化に使用される基本スタイルは、レイアウト構成に役立ちます.

各

ブラウザの余白、フォントの基本スタイルはそれぞれ異なります.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

display:flex分析

display:flexの親ボックスを適用するサブエレメントを左から右に順に配置します(デフォルトは垂直分割)
指向性

Flex要素(Flex Direction)

displayをflexに適用する属性は親要素(display: flex)です.
サブエレメントは、flexという名前のプロパティに値を適用します(flex: 0 1 auto).

サブエレメントにflexプロパティが追加されていない場合は、次の操作を行います.

flex: 0 1 auto; // flex: <grow> <shrink> <basis> ! 순서 중요 !

適用されるデフォルト値はです.

grow:どれくらい成長できますか?

すべてのサブボックスのflex-growプロパティが大きい場合(各数値サイズにかかわらず)、同じ横方向の長さを有します.

心理医:どれだけ減らすことができますか?

減少した比率.flex-growプロパティを使用してパーセントを変更する場合は、flex-shillプロパティをデフォルト値1に保持できます.

基礎:箱の基本寸法?

ストレッチまたは収縮の前に既定のサイズを設定します.基本値はflex-growが0の場合にのみ保持されます.

この問題について(CSSレイアウト、セレクタ), 我々は、より多くの情報をここで見つけました https://velog.io/@jonghwan2_y/CSS-레이아웃-Selector

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

Collection and Share based on the CC Protocol