CSS Flex

Jinny·2023년 10월 26일
CSS
0

CSS

목록 보기
2/3

1. CSS Flex

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

부모 요소인 div.container는 Flex Container라 부르고, 자식 요소인 div.item들은 Flex Item 이라 불린다.

Flex의 속성들은 컨테이너/아이템에 적용하는 속성 2가지로 나뉜다.

2. 컨테이너에 적용하는 속성들

2.1 display:flex

Flex 컨테이너에 display:flex를 적용하면 Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지하게 된다. height는 컨테이너의 높이만큼 늘어난다. 

.container {
	display: flex;
}

아이템들이 배치된 방향의 축을 메인축(Main Axis),
메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)
이라 불린다.

2.2 flex-direction

아이템들이 배치되는 축의 방향을 결정하는 속성이다.
즉, 메인축의 방향을 가로/세로를 정한다. 

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

  • row(기본값)
    아이템들이 행(가로) 방향으로 배치

  • row-reverse
    아이템들이 역순으로 가로 배치

  • column
    아이템들이 열(세로) 방향으로 배치

  • column-reverse
    아이템들이 역순으로 세로 배치

    👉 크기가 작은 모바일 기기에서 column으로 배치하다 일정 폭 이상이 되면 row로 바꿔주는 반응형 레이아웃을
    구현할 때 이용된다!

2.3 flex-wrap

: 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다. 

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

  • nowrap(기본값)
    줄바꿈을 하지 않는다. 넘치면 그냥 삐져 나간다.

  • wrap
    줄바꿈을 한다.

  • wrap-reverse
    줄바꿈을 하는데 아이템을 역순으로 배치한다.

2.4 flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는
단축 속성으로 flex-direction, flex-wrap 순으로
한 칸 떼고 작성한다. 

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

💡 justify는 메인축 방향으로 정렬
💡 align은 수직축 방향으로 정렬

2.5 justify-content

메인축 방향으로 아이템들을 정렬하는 속성

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

  • flex-start(기본값)

    아이템들을 시작점으로 정렬한다.
    flex-direction이 row일 때는 왼쪽, column일 때는 위에서부터 시작한다.

  • flex-end

    아이템들을 끝점으로 정렬한다.
    flex-direction이 row일 때는 오른쪽, column일 때는 아래이다.

  • center

    아이템들을 가운데로 정렬한다.

  • space-between

    아이템들의 사이(between)에 균일한 간격을 만들어 준다.

  • space-around

    아이템들의 둘레(around)에 균일한 간격을 만들어 준다.

  • space-evenly

    아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

2.6 align-items

수직축 방향으로 아이템들을 정렬하는 속성이다.

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

  • stretch (기본값)

    아이템들이 수직축 방향으로 끝까지 쭈욱 늘어난다.

  • flex-start

    아이템들을 시작점으로 정렬한다.
    flex-direction이 row일 때는 위, column일 때는 왼쪽이다.

  • flex-end

    아이템들을 끝으로 정렬한다.
    flex-direction이 row일 때는 아래, column일 때는 오른쪽이다.

  • center

    아이템들을 가운데로 정렬한다.

  • baseline

    아이템들을 텍스트 베이스라인 기준으로 정렬한다. 

justify-conent:center;
align-item:center;

을 적용하면 아이템을 한 가운데에 배치할 수 있다.

2.7 align-content

flex-wrap:wrap;이 설정된 상태에서 아이템들의 행이
2줄 이상일 때의 수직축 방향 정렬을 결정하는 속성이다.
(여러 행 정렬)

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

3. Flex 아이템에 적용하는 속성들

3.1 flex-basis

Flex 아이템의 기본 크기를 설정한다.
(flex-direction이 row일 때는 너비, column일 때는 높이)

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

기본값 auto는 해당 아이템의 너비값을 사용한다.
width를 따로 설정하지 않으면 컨텐츠의 크기가 된다.
content는 컨텐츠의 크기로 너비를 따로 지정하지 않은
경우와 같다. 그외에 각종 단위로 지정할 수 있다. 

.item {
 	flex-basis:100px;
 }

원래 width가 100px이 안되는 item들은 100px로 늘어나지만, 기존에 100px 넘는 item은 그대로 유지된다.

만약 100px 넘는 item도 100px로 맞춰주려면,

.item{
  flex-basis:100px;
  width:100px;
 }

width 속성을 통해 조절하면 100px 넘는 item도
100px로 맞출 수 있다.

3.2 flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수
있는지를 결정하는 속성이다.
flex-grow는 숫자값이 들어가는데 0보다 큰 값이 세팅되면
해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 채운다.
기본값은 0이므로 따로 적용하기 전까지는 아이템이 늘어나지 않는다. 

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

flex-grow에 들어가는 숫자는 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.

<1:3:1의 비율로 세팅할 경우>

.item:nth-child(1) { 
      flex-grow: 1; 
      background-color:yellow;
}
.item:nth-child(2) { 
        flex-grow: 3; 
         background-color:skyblue;
}
.item:nth-child(3) { 
       flex-grow: 1; 
       background-color:pink;
}

Item의 증가 너비 비율을 설정할 수 있으며, 숫자가 크면
더 많은 너비를 가진다.

3.3 flex-shrink

flex-shrink는 flex-grow와 비슷한 속성으로
아이템이 flex-basis의 값보다 작아질 수 있는지 결정한다.

0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고
flex-basis보다 작아진다.
기본값은 1로 따로 세팅하지 않아도 아이템이 flex-basis보다 작아질 수 있다.

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

flex-shrink를 0으로 설정하면 아이템의 크기가 flex-basis보다 작아지지 않아 고정폭의 컬럼을 만들 수 있다.
고정 크기는 width로 설정한다. 

.item:nth-child(1) { 
      flex-shrink:0;
      width:100px;
      background-color:yellow;
}
.item:nth-child(2) { 
        flex-grow: 1; 
         background-color:skyblue;
}

flex-shrink:0; 을 적용해 컨테이너가 아무리 작아져도 첫번째 아이템은 찌그러지지 않고 폭이 100px로 유지된다.
두번째 아이템은 flex-grow 속성을 이용했기 때문에
빈 공간을 다 채우게 된다.

3.4 flex

flex-grow,flex-shrink,flex-basis를 한 번에
쓸 수 있는 축약형 속성이다.

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

단, 주의할 점은 flex:1;처럼 flex-basis를 생략해서 쓰면
flex-basis의 값은 0이 된다. 

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

flex-basis:0은 기본 점유 크기를 0으로 만들기 때문에
결국 전체 크기를 1:2:1로 나누어 가져 영역 자체의 크기가 정확히 1:2:1의 비율로 설정된다.
👉 여백의 비율이 아닌 영역 자체를 원하는 비율로 분할하려면 flex-basis를 0으로 설정하면 된다.

3.5 align-self

align-items의 아이템 버전으로 align-items는 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의
수직축 방향 정렬이다. 

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
}

기본값은 auto로 기본적으로 align-items 설정을 상속 받는다.
align-self는 align-items보다 우선권이 있으며 전체 설정보다
각각의 개별 설정을 우선한다.
auto외의 나머지 값들은 align-items와 동일하다.

3.6 order

각 아이템들의 시각적 나열 순서를 결정하는 속성이다.
값은 숫자이며 작은 숫자일수록 먼저 배치된다.
"시각적" 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니다!

.item:nth-child(1) {
  order:3;
}


.item:nth-child(2) {
	order:1;
}

.item:nth-child(3) {
    order:2;
}

3.7 z-index

z-index는 z축 정렬을 할 수 있으며 숫자가 클수록 위로 올라온다.
(position에서의 z-index와 동일하다.)

.item:nth-child(2) {
	z-index: 1;
	transform: scale(2);
}

z-index는 따로 설정 안하면 0이므로 1만 설정해도 나머지 아이템들 보다 위로 올라온다.

profile
Jinny
이전 포스트

Grid 레이아웃

다음 포스트

[HTML,CSS] 테이블 만들기

0개의 댓글