[CSS]css 레이아웃(2)- flexbox

프로그래밍/HTML&CSS 2021. 12. 25. 08:44

[CSS]css 레이아웃(1) - position / float

앞서 CSS의 박스 모델에 대해 알아보았다. 오늘은 그 박스들을 배치해 레이아웃하는 법을 알아보고자 한다. [CSS]css 박스 모델 오늘은 CSS 기본 설정 중 하나인 박스 모델에 대해 알아보고자 한다. H

hyemco.tistory.com

앞에선 초기 css 레이아웃에 사용되던 position과 float에 대해 알아보았다.
이번엔 현재 레이아웃에 자주 사용되는 flexbox에 대해 알아보고자 한다.

flexbox에 관한 두가지 포인트가 있다.

1. 중심 축(main axis)과 반대 축(cross axis) 존재
2. 컨테이너 속성과 item에 관한 속성으로 나뉨

글의 순서는 다음과 같다.

1. 중심 축과 반대 축
2. 컨테이너 속성

3. 아이템 속성 - 다음 포스팅

1. 중심 축과 반대 축

아이템의 방향에 따라 중심 축/반대 축이 가로/세로 방향으로 바뀔 수 있다.

2. 컨테이너 속성

flex -direction / flex-wrap / flex-flow / justify-content / align-items / align-content

컨테이너는 flexbox들이 놓여있는 영역(box)을 지칭하는 것으로 컨테이너 속성은 이 영역들의 방향과 정렬에 관한 설정을 담고있다.

컨테이너에 속성을 사용하기 위해서는 먼저 아래와 같이 컨테이너 디스플레이를 flex로 지정해줘야 한다.

.box {
   display: flex;
   /* 컨데이너 속성 지정 예시*/
   flex-direction: row;
   flex-wrap: nowrap;
}

1) flex-direction

- 컨테이너의 방향에 관한 속성
- 중심 축과 반대 축을 설정

.container { 
   display: flex; 
   flex-direction: row;  /* row-reverse, column, column-reverse*/ 
}

row : default 값, 행으로 나열
row-reverse : 시작점이 오른쪽부터 시작(오른쪽 정렬과 다름)
column : 열로 나열
column-reverse : 시작점이 아래쪽 부터 시작

2) flex-wrap

- 복수 행을 만들기 위한 속성
- 아이템이 하나의 행에 들어가지 않을 만큼 클 경우 다른 행에 배치

.container { 
   display: flex; 
   flex-wrap: nowrap;  /* wrap, wrap-reverse*/ 
}

nowrap : default 값, 하나의 행에 배치
wrap : 아이템 크기에 맞게 여러 행에 배치
wrap-reverse : 마지막 행부터 배치

3) flex-flow

- flex-direction과 flex-wrap을 함께 쓰는 축약형

.container { 
   display: flex; 
   flex-flow: row nowrap;  
   /* row wrap, row wrap-reverse, row-reverse wrap, row-reverse wrap-reverse*/ 
   /* column wrap, column wrap-reverse, column-reverse wrap, column-reverse wrap-reverser*/ 
}

4) justify-content

- 중심 축을 따라 컨테이너가 정렬되는 방식을 지정

container { 
   display: flex; 
   justify-content: flex-start;  /*flex-end, center, space-between, space-around, space-evenly*/ 
}

flex-start : default 값, 시작선부터 정렬

flex-end : 끝선부터 정렬

center : 가운데 정렬

space-between : 아이템 간격 사이가 일정

space-around : 시작선, 끝선까지 고려해 아이템 간격 사이 균등 분배(시작선, 끝선 전후 여백 : 아이템간 간격 = 1:2)

space-evenly : 시작선, 끝선 전후 여백과 아이템 간격 모두 일정

5) align-items

- 반대 축을 따라 컨테이너가 정렬되는 방식을 지정

.container {
   display: flex; 
   align-items: stretch;  /*flex-start, flex-end, center, baseline*/ 
}

stretch : default 값, 아이템에 width, height 설정이 없다면 반대 축 전체를 차지

flex-start : 반대 축 시작선에 정렬

flex-end : 반대 축 끝선에 정렬

center : 반대 축 중앙에 정렬

baseline : 컨테이너 txt를 기준으로 정렬 (item1에만 padding값을 줬음)

6) align-content

- 반대 축을 따라 아이템 배열을 정렬
- 아이템이 한 행/열에 배치 되어있으면 의미 없음

.container { 
   display: flex;
   align-content: normal;  /*flex-start, flex-end, center, space-between, space-around, space-evenly*/ 
}

noraml : default 값

flex-start : 반대 축 교착 시작점에 덩어리로 정렬

flex-end : 반대 축 교착 끝점에 덩어리로 정렬

flex-center : 반대 축 중앙에 덩어리로 정렬

space-between : 아이템간 거리 간격 동일 정렬 (첫 아이템-시작점, 마지막 아이템-종료점에 붙임)

space-around : 아이템간 거리 간격 동일 정렬 (첫 아이템 이후, 마지막 아이템 이전 여백은 아이템간 거리의 절반)

space-evenly : 이웃한 아이템간 거리, 이전 여백, 이후 여백 간격 동일하게 정렬

요약

1. 중심 축/반대 축

row, row-reverse : 가로 방향/세로 방향
column, column-reverse : 세로방향/가로방향

2. 컨테이너 속성

1) flex-direction (정렬 방향) : row/row-reverse/column/column-reverse
2) flex-wrap (복수 행/열) : nowrap/wrap/wrap-reverse
3) flex-flow (flex-direction, flex-wrap 한번에 쓰는 축약형 속성)
4) justify-content (중심 축 정렬)
- flex-start, flex-end, center, space-between : 아이템 사이간격 일정
- space-around : 아이템과 양쪽끝 2:1
- space-evenly : 모든 간격 일정
5) align-items (반대 축 정렬) : stretch, flex-start, flex-end, center, baseline
6) align-content (반대 축 기준 아이템 정렬)
- normal, flex-start, flex-end, center, space-between : 아이템 사이간격 일정
- space-around : 아이템과 양쪽끝 2:1
- space-evenly : 모든 간격 일정

※ 이어지는 포스팅도 참고바람

[CSS]css 레이아웃(3)- flexbox

아래 포스팅에 이어서 이번에는 flexbox의 아이템 속성에 대해 알아보고자 한다. [CSS]css 레이아웃(2)- flexbox 앞에선 초기 css 레이아웃에 사용되던 position과 float에 대해 알아보았다. 이번엔 현재 레

hyemco.tistory.com

전체 소스코드

<!DOCTYPE html>
<html> 
<head>
   <meta charset="utf-8"> 
   
   <title></title>
   <style> 
      .container { 
         height: 100vh; 
         display: flex; 
         flex-direction: row; /*row-reverse, column, column-reverse*/ 
         flex-wrap: nowrap; /*wrap, wrap-reverse*/ 
         flex-flow: /* flex-dirction, flex-wrap 한 번에 쓰는 축약형 */
         justify-content: flex-start; /*flex-end, center, space-between, space-around, space-evenly*/ align-items: sticky; /*flex-start, flex-end, center, baseline*/ 
         align-content: normal; /*flex-start, flex-end, center, space-between, space-around, space-evenly*/ 
      } 
      
      .item { 
         width: 40px; height: 40px; 
      } 
      
      .item1 { 
         background: #ce93d8; 
         padding: 40px; 
      } 
      
      .item2 { 
         background: #f48fb1; 
      } 
      
      .item3 {
         background: #b39a71; 
      } 
      
      .item4 { 
         background: #98caf9; 
      } 
   </style> 
</head> 

<body>
   <div class="container"> 
      <div class="item item1">aaaa</div>
      <div class="item item2">bbbb</div> 
      <div class="item item3">cccc</div> 
      <div class="item item4">dddd</div> 
      <div class="item item1">aaaa</div> 
      <div class="item item2">bbbb</div> 
      <div class="item item3">cccc</div> 
      <div class="item item4">dddd</div> 
      <div class="item item1">aaaa</div> 
      <div class="item item2">bbbb</div> 
      <div class="item item3">cccc</div> 
      <div class="item item4">dddd</div> 
   </div> 
</body> 
</html>

저작자표시 비영리 동일조건 (새창열림)

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

[CSS]css 레이아웃(4) - grid (0)	2021.12.28
[CSS]css 레이아웃(3)- flexbox (0)	2021.12.27
[CSS]css 레이아웃(1) - position / float (0)	2021.12.24
[CSS]css 태그 - div / span (0)	2021.12.23
[CSS]css display 속성 - block, inline, block-inline (0)	2021.12.22

ABOUT ME

성장하는 혬코 성장하는 혬코

1. 중심 축과 반대 축

2. 컨테이너 속성

1) flex-direction

3) flex-flow

4) justify-content

5) align-items

6) align-content

요약

1. 중심 축/반대 축

2. 컨테이너 속성

전체 소스코드

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. 중심 축과 반대 축

2. 컨테이너 속성

1) flex-direction

3) flex-flow

4) justify-content

5) align-items

6) align-content

요약

​1. 중심 축/반대 축

2. 컨테이너 속성

전체 소스코드

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

1. 중심 축/반대 축