No 1. display

cssの中の位置なので、私は本当に怒って、あきらめたいですが、もう一度正確に整理します!あら.🤬

ディスプレイ

display CSSプロパティは、サブエレメントを配置するときに使用するレイアウトを設定します.たとえば、エレメントをブロックと行のエレメントに処理し、エレメントをブロックと行のエレメントのどちらに処理するかなどです.
https://developer.mozilla.org/ko/docs/Web/CSS/display
💡 つまり、レイアウトを作るときに使う子供と見なすことができます.

block, inline-block

block
blockは私以外の何も許さない!このように理解するのは簡単です.通常divのデフォルト値はblockで、複数のdivを使用するとdivが1つずつ下に落ちるのが見えます.

行内および行内-block
inlineとinline blockの違いはwidthとheight?ないですか.つまり.私と同じ線に立ってください.そう言っていますが、inline blockにはwidthとheightがあります.inlineの代表的なラベルはspanです!以下の図

強制プレイ:inline、width、heightも適用されず、そのまま見ることができます.

<!--html-->
<span class="inline">Hi!</span>
<span class="inline-block">Jetom!</span>

/*css*/
.inline{
  display: inline;
  width: 100px;
  height: 100px;
  color:white;
  background: black;
}

.inline-block {
  display:inline-block;
  width: 100px;
  height: 100px;
  color:white;
  background: black;
}

flex

非常に~~~ごぼうの1つをよく使います.flexに似たfloatもありますが、ieを考慮する必要がある場合にのみ使用します.floatを書くとclear:bothをやって、いろいろやって、flexはこのような過程を省略することができて、本当に幸せです.後😡)
flex CSSプロパティは、Flexプロジェクトがコンテナの占有スペースに適応するためにどのように増大または減少するかを設定するプロパティです.flexはflex-grow、flex-shill、flex-basicのショートカットです.
https://developer.mozilla.org/ko/docs/Web/CSS/flex
flexは親要素を親要素に置くことができます.これで要素をソートできます.写真を見てみましょう.

inline blockのように、最も基本的なのはエッジで位置合わせし、垂直と水平に自由に位置合わせすることができ、親に適用されるべきです.(親!!)

/*css*/

.flex{
  display: flex;
  
  /*메인 방향*/
  justify-content: center;
  
  /*수직 방향*/
  align-items: center;
}

flexには多くの属性がありますが、flex-directionを見てみましょう.

flex-direction

導入方法の各見出しページがあります.(垂直か水平かを基準に正当性を決定するために使用します.)

/*기본*/
flex-direction: row;

/*세로로 정렬*/
flex-direction: column;

/*가로로 정렬하되, 역순으로 배치*/
flex-direction: row-reverse;

/*세로로 정렬하되, 역순으로 배치*/
flex-direction: column-reverse;

flex-wrap

divが1列に並べられない場合は、改行のプロパティを決定します!

/*기본*/
flex-wrap: nowrap;

/*줄바꿈*/
flex-wrap: wrap;

/*줄 바꿈하되, 역순으로*/
flex-wrap: wrap-reverse;

👉 directionとwrapのflex-flowを同時に使用して、1番目とdirectionの2番目をwrapに入れることができます.△marginやpaddingのように、略語と考えられます.
1分間符号化flexを見て理解した私としてbellogでも1分間符号化の正当性をもたらした、alignの説明です.😊😎
「rival」は主軸(魚餅列)方向に並び、alignは垂直軸(魚餅を引き裂く)方向に並ぶ.

qualified-コンテンツのプロパティは次のとおりです.(個人的にはspaceで始まる属性を間違えました😥)

/*기본값*/
justify-content: flex-start;

/*끝점으로 정렬*/
justify-content: flex-end;

/*가운데 정렬*/
justify-content: center;

/*사이에 균일한 간격으로*/
justify-content: space-between;

/*둘레에 균일한 간격으로(끝부터 균일하게 정렬된다 생각하면된다.)*/
justify-content: space-around;

/*아이템들의 사이와 양 끝에 균일한 간격*/
justify-content: space-evenly;

align-items

/*기본*/
align-items: stretch;

/* flex-direction에 따라 기준이 달라진다!*/
align-items: flex-start;
align-items: flex-end; 

/*가운데*/
align-items: center;

align-content

flex-wrap:wrapの状態で、行が2行を超えた場合に垂直軸方向の位置合わせを決定するプロパティ!
属性はitemsと同じです🤣
それ以外は、ディスプレーの種類が多いのですが…使うと怒られます.🤬 実際の作業で使われていない属性(like table属性...?)!