[TIL] CSS Flex,Grid

オシャレなライオンのように、2週目はフロント学院TIL

flexは便利でcssの時によく使いますが、float制約が多すぎて見ませんでした.
ユーザーが多ければ多いほどブラウザを使用する範囲が広がるため、floatを使用する必要があることが多い.
2人とも自由に使えるように実習しましょう.
flex/floatで同じ練習をして、何が違うかを見て、違いを比較します.

Flex

- 메인축(row) 크로스축(column) 기본 축은 row이다
- 1차원적 레이아웃에는 적합하다
- block 요소 성질로 부모의 속성을 통해 자식들을 조절한다.
(부모 = Flex-container 자식들 = Flex-item)

レイアウトが多様化するほど、問題が大きくなり、実装が難しくなり、2 Dレイアウトはグリッドを使用するのに適しています.
グリッドを習ったことがありますが、新しいので属性も混同されていますので、よく使いましょう.
float flex gridの3ステップで練習しましょうalign-self: flex-start; 개별적으로 하나만 줄때사용 flex-wrap: wrap-reverse; 아래로 내리던걸 위로 올린다고 생각하면 좀 더 이해가 쉽다
flexプロパティが思い出せない場合は、開発者ツールでクリックして表示できます.

grid

- 2차원적인 레이아웃을 쓸 때 사용하기 좋다
- 컨테이너 영역을 다 채운다

grid-template-columns : 열의 넓이를 설정 grid-template-rows : 행의 높이를 설정 fr 길이와 넓이를 같은 크기로 가진다 (단위) grid-template-columns: 1fr 1fr grid-template-columns: repeat(4, 1fr); 간단하게 표현 가능 repeat(適用するトラックの数、重複する数値)関数を使用して、グリッドトラックの数値重複を設定します(プロジェクトにテキストが多すぎる場合はfrプロパティは使用できません).grid-template-columns: repeat(3, 33.333%); %を使用するとgapを設定するとスクロールするのでfrを使用するのが望ましい
grid-column-start: 1; 開始点
grid-column-end: 3; しゅうてん
grid-column: 1/span 3; 1格から3格にマージし、2つを表す
占有span格(1/4 = 1/span 3 )
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexの良い文章
今日の思い出📌
受講の際、表示構造を作成する際に、視覚構造やスクリーンリーダーが読むべき情報を順番に作成していくことを感じている人が多いようです.これからやるべきことはたくさんありますが、消化するためには、どんどんやっていきます.実習は最高です!