개발 공부

flex box 정리하기 본문

코딩 정리 노트

flex box 정리하기

hyecozy 2021. 12. 7. 00:49

flex box란

1. 박스를 감싸는 컨테이너가 있어서, 각 박스에 적용할 수 있는 속성값이 존재하고,

또 각각의 아이템들에게 따로 적용할 수 있는 속성값이 존재.

 

컨테이너를 꾸미는 속성값

: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

아이템에 적용되는 속성값

: order, flex-grow, flex-shrink, flex-basis, align-self

 

2. flex box에는 중심축과 반대축이라는 개념이 있다.

수평(row)과 수직(column)을 중심축과 반대축으로 삼을 수 있는데 유동적이다

중심축은 수평축이 될 수도 있고 수직축이 될 수도 있다는 것

 

 

컨테이너를 꾸미는 속성값

1. display

display는 뭐... flexbox를 이용할 거니까 이렇게 설정해주면 셋팅 완 ㅋ

display: flex;

 2. flex-direction

중심축을 정하는 속성인데 기본적으로 row(수평), column(수직)이 있다.

역방향으로 정렬하고 싶으면 뒤에 -reverse를 붙이면 된다. 

역방향 정렬하면 당연한 말이지만 1234이렇게 정방향 정렬이었던 게 4321 이렇게 정렬된다는 뜻임

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

3. flex-wrap

wrap이란...! 창 크기를 줄이면 안에 있는 아이템들이 기존 지정 사이즈값을 일정하게 유지하다가 자리가 좁아져서

막 찌그러진다. 찌그러지면서까지 한줄에 있고 싶어하는 게 flex-wrap의 기본값 nowrap;이다

그때 우리가 "얘드라~~ 찌그러질 필요가 있니,,? 그냥 다음 줄에 가서 앉으렴.. ^-^" 하고 아이템의 몸뚱이 사이즈를

지켜주면서 다음 줄로 갈 수 있게끔 하는 것이 wrap이다. 사이즈 변형 안 되게 포장하는 거니까 wrap임

얘도 reverse가 가능하다!

4. flex-flow

border의 선 굵기와 선 타입과 선 색깔을 따로따로 적지 않고 한번에

border: 1px solid black;

이렇게 적을 수 있는 것처럼, flex-direction과 flex-wrap을 한번에 적을 수 있는 속성이 flex-flow다.

내가 만약 '중심축을 수평에 역방향 정렬', '랩핑을 하되 역방향 정렬'로 설정하고 싶다면 밑처럼 입력하면 됨

flex-flow: row-reverse wrap-reverse;

5. justify-content

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;

얘는 flex-direction에서 설정한 '중심축'에서 아이템들을 어떻게 배치할 것인지 지정하는 속성이다.

기본값은 flex-strat (처음부터, 즉 왼쪽에서 오른쪽으로)인데 안에 아이템의 배열은 바뀌지 않는다.

flex-end도 있다. 얘는 마지막에서부터 둔다는 거임 (즉 오른쪽에서 왼쪽으로)

만약 중심축이 row가 아니라 column이라면 flex-start값을 뒀을 때 위에서부터 배치가 될 거고

flex-end값을 뒀을 땐 아래에서부터 배치가 될 거임.

근데 !! 주의할 점. 중심축 지정할 때 reverse가 들어 있으면 flex-start, flex-end도 뒤바뀌어서, start가 end가 되고 end가 start가 됨

center은 중간 배열

space-around는 아이템에 마진값이 생긴다고 생각하면 편하다.

그래서 양끝은 스페이스가 한번씩 적용이 돼있고 사이사이는 스페이스가 한번+한번으로 겹쳐서 2배가 돼있음

space-evenly는 겹치는 거 안 쳐줌 그냥 모든 스페이스가 일정

space-between은 양끝에는 스페이스 없이 사이에만 스페이스 있음

6. align-items

justify-content가 중심축의 아이템들을 배치한다면 align-item은 반대축의 아이템을 배치할 때 씀.
align-item에는 baseline이란 것이 있는데 item 안에 있는 텍스트를 가지런히 같은 베이스라인에 놓고 싶을때 씀...!

<<혹시 item 박스 중 하나가 크기가 달라서 텍스트의 배열이 어그러졌을 때 정리하기 유용

7. align-content

반대축에서 어떻게 배열할 건지 정하는 애 ㅇㅇ

 

+추가 지식

<html>
<body>
  .container {
      background: beige;
      height: 100vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

height의 100%와 100vh의 차이는 뭐냐면!!!
100%의 기준은 컨테이너가 들어있는 부모의 높이임.
컨테이너의 부모는 <body>태그니까 body의 height를 100%로 채우겠다는 뜻임

body가 뭐야? 컨텐츠지? 그러니까 즉 컨텐츠의 높이만큼을 100으로 기준 삼는다는 거임

컨텐츠가 5줄이면 height도 5줄만큼의 높이가 최대

근데 난 5줄 말고 화면 전체를 100 삼고 싶다.... 그럼 이제 body의 부모 태그인 html까지 100%로 맞춰 줘야 하는 거임

body, html {
height: 100%
 }

.container {
height: 100%
}

이래야 됨 너무 길다... 그래서 vh를 쓴다
100vh는 부모의 height에 상관없이 보이는 뷰에 맞춰서 100만큼 채우겠다는 뜻임 

 

 

아이템을 꾸미는 속성값

1. order

순서를 바꿀 수 있다.

만약 박스 123이 차례대로 놓여있을 때

.item1 {
      order: 3;
      }

이렇게 하면 1번째에 있던 애가 3번째로 가서 박스가 231 이렇게 배열됨

2. flex-grow

화면의 크기가 바뀌어도 아이템들은 컨테이너가 넓어지든 좁아지든 지정된 제 크기만큼만 유지하려고 한다

flew-grow를 쓰면 제 크기가 넘어가는 한이 있어도 컨테이너를 꽉 채우려고 함. 기본값은 0

만약 flex-grow: 2; 라고 작성해 두면 얘는 늘어나고 줄어들 때 다른 애들의 2배는 화면에 꽉 채우려고 함

3. flex-shrink

grow랑 반대. 얘는 화면을 줄여서 찌그러지기 시작할 때 지정값만큼 줄어듦

만약 flex-shirink: 4;라고 하면 다른 아이템이 1배 줄어들 동안 얘는 4배 찌그러져 있음 

4. flex-basis

아이템들이 얼마나 공간을 차지해야 하는지 세부적으로 지정하는 값
기본값은 auto;인데 auto라면 grow나 shirink에 지정된 값을 따름
근데 grow나 shink가 없고 basis값으로 %값을 주면 해당 아이템의 비율을 늘 그 %로 표시되게끔 한다

5. align-self

컨테이너에 지정된 값에서 벗어나서 아이템 개별로 배치를 설정할 수 있다

 

 

 

 

'코딩 정리 노트' 카테고리의 다른 글

도메인이란?  (0) 2022.06.15
[JavaScript] 아이디 중복 체크 여부 기능 만들기  (0) 2022.06.11
[Spring Boot] 프로젝트 환경 설정  (0) 2022.06.09
'코딩 정리 노트' Related Articles more
Comments