들어가다
이 기사는 국민 대학 임베디드 소프트웨어 서클 KOBOT의 과제에 대한 개인 기록을위한 것입니다. CSS 레이아웃 – flex & grid 1~8강 내용을 정리한 포스트입니다.
내용
CSS 레이아웃
레이아웃은 구성 요소를 공간에 효과적으로 배치하거나 그 기술을 의미합니다.
CSS 레이아웃은 웹 요소를 올바른 위치에 배치하는 기술입니다. CSS 레이아웃 기술은 형제 요소를 정렬할 수 있게 하고 요소가 컨테이너 내에서 어떤 위치에 배치되는지를 결정할 수 있습니다.
대표적인 CSS 레이아웃 기술로는 다음을 들 수 있다.
- 일반적인 문서 흐름
- display 속성
- 플렉스 박스
- 그리드 레이아웃
- float 속성
- position 속성
- 기타 등
플렉스 박스 (flexbox)
플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치하고 정렬하는 1차원 레이아웃 체계를 말합니다.
플렉스 박스 방식에서 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호 작용에 의해 결정됩니다.
플렉스 컨테이너: 플렉스 박스 방식으로 레이아웃을 결정하는 요소
플렉스 아이템: 플렉스 컨테이너내에서 플렉스 박스 방식으로 배치되는 요소
플렉스 박스 방식을 사용하기 위해서는, 우선적으로 플렉스 컨테이너를 작성할 필요가 있습니다만, 그 방법은 그 요소에 display: flex; 라고 하는 속성을 지정하면 된다. 이것은 기본적으로 상자 수준의 요소입니다. 플렉스 컨테이너가 인라인 레벨 요소인 경우 display:inline-flex;로 수정하십시오.
주축과 교차축
플렉스박스 방식은 두 개의 축을 제공합니다. 그 중 하나의 축을 주축으로 요소를 배치합니다. 스핀들의 기본값은 가로(왼쪽에서 오른쪽)입니다.
flex-direction
플렉스 컨테이너의 주축을 결정하는 속성입니다. 행은 가로축을, 열은 세로축을 주축으로 한다.
플렉스 랩
플렉스 아이템을 강제적으로 1행에 배치시킬지, 가능한 영역내로부터 일탈하지 않고 복수행으로 나누어 표현할지를 결정하는 속성입니다.
justify-content
플렉스 아이템이 플렉스 박스 주축을 따라 배치될 때 요소 사이의 공간을 분배하는 방법을 결정합니다.
align-items
플렉스 컨테이너의 교차 축 위에서 플렉스 항목이 어떻게 배치되는지 결정합니다.
align-self
각 플렉스 항목이 교차 축에서 어떻게 정렬되는지 결정합니다. 각각의 아이템에 개별적으로 추가해주는 속성이다.
align-content
교차축 위에서 justify-content 와 같이 사용할 수 있는 속성이다. 다음 두 가지 조건이 충족되며 여유 공간이 있는 경우에만 작동할 수 있습니다.
- flex-wrap의 값이 wrap에 지정되었을 때
- 항목을 배치하는 데 필요한 공간보다 플렉스 컨테이너가 큰 경우
flex-grow
플렉스 아이템이 디폴트 사이즈보다 커질지 어떨지를 결정해, 플렉스 컨테이너내에서 할당할 수 있는 스페이스를 상대적으로 정의할 수 있는 속성이다.
flex-shrink
플렉스 아이템이 디폴트 사이즈보다 작아질지 어떨지를 결정해, 플렉스 컨테이너내에서 할당할 수 있는 스페이스를 상대적으로 정의할 수 있는 속성입니다.
flex-basis
플렉스 항목의 초기 크기를 지정합니다. box-sizing이 별도로 설정되어 있지 않은 경우, 컨텐츠 박스의 사이즈를 결정하게 된다. 기본값은 auto입니다.
flex
flex 는, flex-grow, flex-shrink, flex-basis 순으로 이 3 개의 가자의 속성을 정의할 수 있는 단축 속성이다.
.item{
/* 200px보다 크거나 작을 수 없다 */
flex: 0 0 200px;
}주문
플렉스 아이템의 배치 순서를 설정할 수 있고, 지정한 숫자에 맞추어 오름차순으로 배치가 진행된다. 코드에 영향을 주지 않고 표시되는 순서에만 영향을 줍니다.
