[웹1]240125-11일차(flex요소, 개구리 게임)

https://codepen.io/pen

[코드펜 열기]

Create a New Pen

 

Create a New Pen

https://codepen.io/limyena/pen/mdoMraB

형제들끼리 공유하는 높이

 

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

[개구리게임에서 공부한 내용]

justify-content: 요소들을 가로로 정렬

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬

flex-end: 컨테이너의 오른쪽으로 정렬

center: 컨테이너의 가운데 정렬

space-between: 요소들 사이에 동일한 간격을 둠

space-around:요소들 주위에 동일한 간격을 둠

 

align-items: 요소들을 세로로 정렬

flex-start: 요소들을 컨테이너의 꼭대기로 정렬

flex-end: 컨테이너의 바닥으로 정렬

center: 컨테이너의 세로선상 가운데 정렬

baseline: 컨테이너의 시작위치에 정렬

stretsh:요소들을 컨테이너에 맞도록 늘림

 

align-self: 개별요소에 적용할 수 있는 속성

flex-start: 요소들을 컨테이너의 꼭대기로 정렬

flex-end: 컨테이너의 바닥으로 정렬

center: 컨테이너의 세로선상 가운데 정렬

baseline: 컨테이너의 시작위치에 정렬

stretsh: 요소들을 컨테이너에 맞도록 늘림

 

flex-direction: 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정

row: 요소들을 텍스트의 방향과 동일하게 정렬

row-reverse: 요소들을 텍스트의 반대방향으로 정렬

column: 요소들을 위에서 아래로 정렬

column-reverse: 요소들을 아래에서 위로 정렬

 

flex-wrap: 더이상 한줄에 요소를 담을 수 없을때 줄바꿈을 어떻게 할지 결정하는 속성

nowrap: 요소를 한줄에 정렬

wrap:요소를 여러줄에 걸쳐 정렬

wrap-reverse: 요소를 여러줄에 걸쳐 반대로 정렬

 

flex-flow: flex-direction과 flex-wrap이 자주 같이 사용되기 때문에 flow-flow를 대신 사용할 수 있다.

ex)

flex-direction: row;

flex-wrap: wrap;             ----->    flex-flow: row wrap  :  요소들이 가로선상의 여러줄에 정렬됨

 

align-content:  여러줄 사이의 간격을 지정

flex-start: 요소들을 컨테이너의 꼭대기에 정렬

flex-end: 컨테이너의 바닥 정렬

center: 컨테이너의 세로선상 가운데 정렬

space-between: 여러 줄들 사이에 동일한 간격을 둠

space-around: 여러 줄들 주위에 동일한 간격을 둠

stretsh: 여러 줄들을 컨테이너에 맞도록 늘림

 

 

https://codepen.io/limyena/pen/poYWdGw

justify-content: space-"";

 

[ flex-direction  ] -> flex-item 방향 정렬

row(가로 한줄에 같이 배치: 기본값)

jutify-content: ; -> 가로작동

align-items: ; -> 세로작동

flex-grow: ; -> 가로에서 작동(너비)

 

column(세로 한줄에 하나씩 배치)

jutify-content: ; -> 세로작동

align-items: ; -> 가로작동

flex-grow: ; -> 세로에서 작동(높이)

 

->reverse를 사용하게 되면 start와 end방향이 바뀐다.

ex)

row

jutify-content: flex-start; -> 좌측정렬

row-reverse

jutify-content: flex-start; -> 우측정렬