css를 배우고 있습니다.
flex는 참 어렵네요..
Flexbox Froggy는 flex를 재밌게 배울 수 있어서 꼭 한번 해보시길 바랍니다. :)
각 단계마다 먼저 알아야 할 내용들을 써놨습니다 참고해주세용
https://flexboxfroggy.com/#ko
flex란?
display 속성으로, 내부 자식 박스들의 배치에 영향을 미치는 내부 디스플레이 타입 중 하나입니다.
컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합입니다.
기본 속성 정보
- 새로운 display 속성입니다.
display:flex; display:inline-flex;
- Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 합니다. 이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item 이라고 부릅니다.
- flex는 자신의 직계자식까지만 영향을 미칩니다.
주축과 정렬 방향
flex-container는 기본적으로 주축(axis)를 가지며 기본 방향은 왼쪽에서 오른쪽을 향합니다.
justify-content
주축(Axis)을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정할 수 있습니다.
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
해답: justify-content: flex-end;
해답: justify-content: center;
해답: justify-content: space-around;
해답: justify-content: space-between;
align-items
cross-axis를 기준으로 이동합니다.
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
해답: align-items: flex-end;
해답: justify-content: center;
align-items: center;
해답: justify-content: space-around;
align-items: flex-end;
flex-direction
flex-container가 사용할 주축과 정렬 방향을 결정합니다.
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
해답: flex-direction: row-reverse;
해답: flex-direction: column;
해답: flex-direction: row-reverse;
justify-content: flex-end;
row-reverse를 사용하여 반대로 정렬해주면 요소들의 start, end 순서가 바뀌기에
flex-end를 해줍니다.
해답: flex-direction: column;
justify-content: flex-end;
요소를 위에서 아래로 정렬했기에 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀌었습니다. flex-end를 줍니다.
해답: flex-direction: column-reverse;
justify-content: space-between;
column-reverse로 주축을 열 방향으로 지정. 시작점을 바꿔줍니다.
주축을 기준으로 이동하는 justify-content로 요소 사이 동일한 간격을 줍니다.
해답: flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
order
flex-item 들의 순서를 결정합니다. 수의 의미로 순서를 결정하지 않습니다.
수의 크기로 결정합니다. 수가 작을 수록 더 우선 순위를 부여 받습니다. 음수도 사용이 가능합니다.
해답: order: 1;
order는 수가 작을수록 우선순위를 부여 받기에 1이상의 값을 입력해 줍니다.
해답: order: -1;
빨간개구리를 앞으로 보내려면 order의 수가 0보다 작아야 합니다.
align-self
부모의 align-items 속성을 덮어 flex-item 에게 개별적인 align-items 속성을 부여합니다. 기본값은 align-items와 마찬가지로 stretch 입니다.
해답: align-self: flex-end;
align-self는 align-items와 사용하는 값이 같습니다.
해답: order:1;
align-self: flex-end;
flex-wrap
flex-container는 flex-item 넓이의 합이 컨테이너보다 크다고 해서 강제로 flex-item의 넓이를 조절하지 않습니다.
때문에 자식요소를 감싸서 부모의 넓이에 따라 자식들을 줄바꿈하도록 하는 기능이 필요한데, 그것이 바로 flex-wrap 입니다.
마치 float 속성이 적용된 자식 요소들이 부모의 넓이 따라 아래로 떨어지는 모습과 유사합니다.
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
해답: flex-wrap: wrap;
해답:flex-direction: column;
flex-wrap: wrap;
flex-flow
flex-direction과 flex-wrap은 같이 사용하는 일이 많기 때문에 flex-flow 속성을 통해 단축하여 사용할 수 있습니다.
direction과 wrap의 순서는 상관 없습니다.
.container { display: flex; flex-flow: wrap column; /* flex-wrap: wrap; flex-direction: column; 과 동일합니다. */ }
해답: flex-flow: wrap column;
align-content
flex-container의 cross-axis 축의 아이템들이 여러 줄일 때 사용 가능합니다. 따라서 두 줄의 flex-wrap:wrap인 상태에서 사용해야 합니다.
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
해답: align-content: flex-start;
해답: align-content: flex-end;
해답: flex-direction: column-reverse;
align-content: center;
해답: flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
(flow를 사용하니 3줄 만에 성공했따.)
끄읏!
한번 풀어보고 부족한거 같아 한번 더 풀어보니 어느정도 이해가 되었습니다.
아직도 긴가민가 하지만 다른 코드를 구현하며 배워보도록 하겠습니다.
다들 화이팅!!!!!!!!!
