[CSS] Flexbox

float

• 이미지와 텍스트들을 어떻게 배치할 건지 정리하기 위해 나타남
• float:left = 이미지가 왼쪽으로 정렬되고 나머지 텍스트
• float:center = 이미지가 가운데
• float:right = 이미지가 오른쪽

Flaxbox

• 컨테이너에 적용하는 속성값이 존재, 컨테이너 안의 아이템이 적용하는 속성값이 존재
• 중심축(main axis)과 반대축(cross axis)이 있음

- container 속성

1. display (flex 사용을 위해 선언)

- display: flex;

2. flex-direction (방향)

- flex-direction: row; (기본)
- flex-direction: row-reverse;
- flex-direction: column;
- flex-direction: column-reverse;

3. flex-wrap

- flex-wrap: nowrap; (기본)
- flex-wrap: wrap; (공간 부족하면 다음 라인으로 넘어가게 됨)  

4. flex-flow (flex-direction + flex-wrap)

5. justify-conent (중심축에서 아이템을 어떻게 배치할 건지)

- justify-conent: flex-start; (기본)
- justify-conent: flex-end;
- justify-conent: center;
- justify-conent: space-around;
- justify-conent: space-evenly;
- justify-conent: space-between;

6. align-items (반대축에서 아이템을 어떻게 할 건지 결정)

- aling-items: baseline; 균등하게 해 줌

7. aling-content (반대축에서 아이템을 어떻게 배치할 건지)

- aling-content: start
- aling-content: end;
- aling-content: center;
- aling-content: space-around;
- aling-content: space-evenly;
- aling-content: space-between;

- item 속성

1. order (아이템의 순서)

2. flex-grow (컨테이너의 크기가 커졌을 때 아이템의 늘어나는 비율을 지정)

- flex-grow: 0; (기본)

3. flex-shrink (컨테이너의 크기가 작아졌 때 아이템의 줄어드는 비율을 지정)

- flex-shrink: 0; (기본)

4. flex-basis

- flex-basis: auto; (기본, grow나 shrink에 맞춰서 변형)
- flex-basis: 값; (컨테이너의 width에 따라서 커질 때도, 작아질 때 변형)

5. align-slef (아이템별로 아이템을 정렬)

 

 

마지막으로 연습을 위해

Flexbox Froggy 게임: https://flexboxfroggy.com/ 까지 하기!!