웹프로그래밍 - 4-2 flexbox 컨테이너에 적용하는 속성들

수업

eunslog 2023. 4. 3. 23:46

3/23 수업

container에 적용하는 속성들

display: flex;

- 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다.

- item을 inline으로 만듦.

- height은 container의 높이만큼.

display: inline-flex;

- container를 inline으로 만듦.

inline-flex를 사용하지 않고 이전 페이지의 레이아웃을 구현하는 방법?

새로운 div를 만들어서 두 div를 감싼다.

css에 display: flex를 추가한다.

(felx-wrap : 줄 넘김.)

flex-direction : 배치 방향 설정

- row, row-reverse, column, column-reverse

flex-wrap: 줄넘김 처리 설정

- 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지

결정하는 속성

flex-box = flex-direction + flew-wrap

ex) flex-flow: row wrap;

정렬

- justify: 메인축 방향으로 정렬

- align: 수직축 방향으로 정렬

justify-content : 메인축 방향으로 아이템들을 정렬

align-items

- 수직축 방향으로 아이템들을 정렬

- stretch : 아이템들이 수직축 방향으로 끝까지 쭉 늘어나고 나머지 값을 적용하면 container의

높이만큼, 혹은 지정한 width만큼 높이 차지

justify-content: center + align-item: center

justify-content: center;

align-items: center;

보통 이렇게 많이 씀.

align-content : 줄과 줄 사이에 관한 속성. 한 줄로만 표현되면 의미가 없음.

- 여러 행 정렬

- flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때, 수직축 방향

<container 속성>

한 줄 내에서(아이템들의 정렬)

-주축을 기준으로 아이템 정렬-> justify-content

-교차축을 기준으로 아이템 정렬-> align-items

여러 줄(줄들의 정렬)

- 줄과 줄 사이 배치를 고려시 -> align-content

다음은 아이템에 적용하는 속성들에 대해 알아보겠습니다.