프로젝트에서 프론트 부분을 맞게 되어 기본개념을 공부하고자 글을 작성하게 되었습니다.
Flex란?
CSS에서의 Flex는 Flexible Box 혹은 Flexbox라고 부르기도 한다.
Flex는 레이아웃 배치 전용 기능으로 고안되었고 편리하게 레이아웃을 만들 수 있다.
부트스트랩에서 자주 사용했던 기능은 주소로 첨부했다(https://getbootstrap.kr/docs/5.3/utilities/flex/)
아래는 예시로 많이 쓰이는 코드다
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>
위의 코드에서 contatiner는 부모요소인 div.container이며 이것은 Flex Container와 같은 의미고
자식 요소인 div.item은 Flex Item과 같은 의미다
즉 컨테이너는 Flex의 영향을 받는 전체 공간을 말하며 설정된 속성에 따라 각각의 아이템들이 배치된다고 생각하면 된다.
(container와 item 간의 속성이 나뉜다)
Flex의 속성(Container)
- display
- flex
- flex는 가로방향으로 배치되고 자신이 가진 내용물의 width 만큼만 차지하게 된다.
- inline요소처럼 배치 되고 height는 컨테이너의 높이만큼 늘어난다.
- flex를 적용하게 되면 직접 연결된 자식들은 모두 flex적용을 받는다.
- 레이아웃 구성시 여러 열과 행을 가진 컨테이너를 생성하는 사용 하면 좋다
- inline-flex
- flex 처럼 가로 방향으로 배치되지만 몇 가지 차이점이 있다.
- flex는 부모 요소의 가로 너비를 기반으로 작동하고 div나 section과 같은 블록요소에서 사용되지만 inline-flex는 인라인 요소로 동작하므로 다른 인라인 요소와 함께 같은 줄에 위치할 수 있다.
- 또한 flex와는 다르게 기본 너비는 내부 콘텐츠의 크기에 따라 결정되고 조절된다.
- 주로 텍스트 라인 내에서 레이아웃을 조정하고자 할때 사용하면 좋다.(ex- 텍스트 사이에 아이콘, 작은 레이아웃 조각 배치)
- flex
.container {
display: flex;
/* display: inline-flex; */
}
배치 방향 설정하기
- flex-direction - 아이템이 배치 되는 축의 방향을 결정한다.
- row
- 기본값이며 아이템들이 가로 방향(행)으로 배치 된다.
- column
- 아이템들이 세로 방향(열)으로 배치된다
- row-reverse
- 아이템들이 역순으로 가로 배치 된다.
- column-reverse
- 아이템들이 역순으로 세로 배치 된다.
- row
줄 넘김 처리 설정하기
- flex-wrap
- nowrap
- 기본값이며 줄 바꿈을 하지 않고 한 줄에 표시된다.
- wrap
- 아이템이 Flex 컨테이너의 너비를 초과하면 다음줄로 넘어간다.
- 여러 줄로 표시될 수도 있다.
- wrap-reverse
- wrap과 비슷하며 대신 순서가 역순으로 표시된다.
- nowrap
- flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
사용 방법은 flex-direction의 속성, flex-wrap의 속성순으로 적으면 된다.- 예시) flex-flow: flex-direction속성 flex-wrap 속성
.container {
display: flex;
flex-flow: row wrap;
}
위 예제에서는 Flex 컨테이너의 아이템들이 행 방향으로 배치되고, 너비를 초과할 경우 여러 줄에 걸쳐 표시된다.
메인축 방향 정렬
- justify-content
- flex-start
- 기본값이며 아이템들을 시작점으로 정렬한다.
- flex-end
- 아이템들을 끝점으로 정렬한다.
- center
- 아이템들을 가운데로 정렬한다.
- space-between
- 아이템들의 사이(between)에 균일한 간격을 만들어 준다.
- 첫 번째 Flex 아이템은 컨테이너 시작 부분에 위치하고 마지막 Flex 아이템은 컨테이너 끝 부분에 정렬된다.
나머지 아이템들은 그 사이에 동일한 간격을 유지하면서 정렬된다.
- space-around
- 아이템들의 둘레(around)에 균일한 간격을 만들어 준다.
- 첫 번째 Flex 아이템과 마지막 Flex 아이템에는 반 간격이 적용된다.
- space-evenly
- 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
- flex-start
수직축 방향 정렬
- align-items
- stretch
- 기본값이며 아이템들이 교차 축을 따라 컨테이너의 전체 높이에 맞게 늘어난다.
- flex-start
- 아이템들을 교차 축의 시작점으로 정렬한다.
- flex-end
- 아이템들을 교차 축의 끝으로 정렬한다.
- center
- 아이템들을 교차 축을 따라 가운데로 정렬한다.
- baseline
- 아이템들을 텍스트 베이스라인 기준으로 정렬한다.
- stretch
여러 행 정렬
- align-content - flex-wrap: wrap이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정하는 속성이다.
- stretch
- 기본 값이며 여러 줄의 Flex 아이템들이 교차 축을 따라 컨테이너의 전체 높이에 맞게 늘어난다.
- flex-start
- 여러 줄의 Flex 아이템들을 교차 축의 시작 부분에 정렬시킨다
- flex-end
- 여러 줄의 Flex 아이템들을 교차 축의 끝 부분에 정렬시킨다
- center
- 여러 줄의 Flex 아이템들을 교차 축을 따라 가운데에 정렬시킨다
- space-between
- 여러 줄의 Flex 아이템들을 교차 축에 동일한 간격으로 정렬시키고 첫 번째 줄은 컨테이너 시작 부분에 배치시키고 마지막 줄은 컨테이너의 끝 부분에 배치시킨다.
- space-around
- 여러 줄의 Flex 아이템들을 교차 축에 동일한 간격으로 정렬함과 동시에 시작과
끝 부분에 반 간격이 적용된다.
- 여러 줄의 Flex 아이템들을 교차 축에 동일한 간격으로 정렬함과 동시에 시작과
- space-evenly
- 여러 줄의 Flex 아이템들 사이에 동일한 간격을 유지하면서 교차 축을 따라 분산시킨다.
- stretch
참고한 사이트
https://studiomeal.com/archives/197
https://lanace.github.io/articles/Flex-guide/
'스터디일지 > CSS' 카테고리의 다른 글
[CSS] 기본 익히기 PART 5 (1) | 2024.03.14 |
---|---|
[CSS] 기본 익히기 PART 4 (0) | 2024.03.13 |
[CSS] 기본 익히기 PART 3 (0) | 2024.03.13 |
[CSS] 기본 익히기 PART 2 (0) | 2024.03.13 |
[CSS] 기본 익히기 PART 1 (0) | 2024.03.13 |