CSS 레이아웃2(flex, grid)

Jerry95 2024. 4. 10. 21:23

2024. 4. 10. 21:23

1. flex

1차원의 개념

1-1) flex가 없을 때 요소를 가로로 배치하는 방법

<style>
    .container{
        border: 5px dashed orange;
    }
    .item{
        width: 50px;
        height: 50px;
        baackground-color: skyblue;
        border: 3px solid blue;

        /* display:inline-block; */
        float: left;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

ㄱ) inline-block

item들의 display를 inline-block으로 만들어주기.
- 문제 발생 : margin이 존재하지 않지만 요소와 요소 사이에 여백존재
- 하나의 요소와 다른 요소 사이에 개행이나 spacing이 존재하면, 여백 발생
- div 태그들을 붙여서 작성하면 문제는 해결 → 옳지 않음

ㄴ) float

item들의 float 속성에 left 값 주기
- 문제발생 : float 속성 사용시 요소들이 왼쪽에 부유하게 됨(2층에 존재 → 1층이 비어있음)
- float 속성을 가진 태그들을 감싸고 있던 container가 요소들을 잃으면서 쪼그라들게 처리됨

1-2) flex의 구성

<style>
    .container{
        border: 5px dashed orange;

        display: flex;
    }
    .item{
        width: 50px;
        height: 50px;
        baackground-color: skyblue;
        border: 3px solid blue;


    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

display의 값을 flex로 주면 가로 또는 세로로 요소를 정렬할 수 있음

ㄱ) flex-container

부모 개념

ㄴ) flex-item

자식 개념
flex-container과 flex-item이 사용할 수 있는 속성이 달라짐

ㄷ) main axis

메인 축 : 가로축

ㄹ) cross axis

교차축 (메인 축과 수직을 이루는 축) : 세로축

1-3) flex-container

ㄱ) display

바깥쪽: block, inline
안쪽 : flex, gridㄴ) container에서 사용할 수 있는 속성
ㄴ) flex-direction : 주축과 방향을 결정
- row : 기본값으로 주축은 가로(왼쪽에서 오른쪽)
- row-reverse : 주축은 가로지만 방향이 오른쪽에서 왼쪽
- column : 주축이 세로방향으로 변경됨(위에서 아래)
- column-reverse : 주축은 세로지만 방향이 아래에서 위
  ㄷ) flex-wrap
- 기본값 : 컨테이너의 width, height에 맞춰 강제로 한줄에 배치되는 것
  - container의 width이 맞춰 각 요소들의 width가 줄어들게 됨
- wrap : 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것인지 결정하는 속성

1-4) flex-item

ㄱ) order

현재 요소의 배치 순서를 지정하는 속성

<style>
    .container{
        display: flex;
    }

    ...

    .item.nth-child(3) {
        order: -1
    }
    .item.nth-child(1) {
        order: 1
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
<body>

기본값은 0으로 코드 순서대로 배치됨
가장 작은 값(음수)를 요소의 속성으로 부여하게 되면 순서가 가장 앞으로 배치
기본값이 0이기 때문에 0보다 큰 수를 입력하면 순서가 가장 뒤로 배치됨

ㄴ) flex-grow, flex-shrink, flex-basis

flex-grow
- 기본값은 0(0으로 동일하기 때문에 나누어 가지지 않음)
- flex item들의 요소가 container보다 작을 때 사용
- 할당할 공간이 남아있고 형제 요소(item)들이 동일한 flex-glow값을 갖는다면 남는 부분을 동일하게 나눠가짐
flex-shrink
- 기본값은 1(1로 동일)
- flex-item들의 요소가 container보다 클 때 사용
- container보다 item 요소가 크다면, 자동으로 container에 맞춰서 item들이 줄어들게 됨
flex-basis
- flex-item의 초기 크기를 지정(grow, shrink되지 않았을 때의 기본 영역)
- flex-item의 크기를 width로 지정하지 않으면 차지하고 있는 컨텐츠의 영역만큼의 크기를 가짐
  - flex-item들에게 flex-grow의 값을 1로주면, 늘어나는 크기가 생각과는 다름
  - 요소의 크기만큼 basis를 가짐
  - 각각의 item들이 가진 사이즈만큼 늘어나는것이 아니라, flex-grow의 값을 3등분하여 나눠줌
- flex-basis에 100px의 값을 주면 각각 100px만큼의 basis(너비)를 가짐
  - 이 상태에서 flex-grow의 값을 1로주면, 동일한 basis를 가지고, basis를 제외한 나머지 영역을 1:1:1로 나누어 할당 받음
- flex-basis를 0으로 주기
  - 초기 item 영역이 0인 상태에서 flex-grow 값을 1로주면,basis가 0이기 때문에 item들이 각각 1:1:1의 너비를 가짐
```
<style> 
      .container{ 
      width: 200px; 
      border: 5px solid orange; 
      display: flex; 
      } 

      .item{ 
      heigth: 50px; 
      margin: 5px; 
      background-color: skyblue; 
      border: 3px solid blue; 
      /* flex-grow: 1 */ 
      / *flex-basis: 100px; */ 
      flex-basis: 100px: 0; } 
</style> 
<body> 
    <div class="container"> 
          <div class="item">푸바오</div> 
          <div class="item">!</div> 
          <div class="item">!</div> 
    </div> 
<body>
```

1-5) flex property

ㄱ) justify-content : 메인축

flex-item들을 한줄 안에서어떻게 배치할건지 결정

flex-start : 주축이 시작되는 위치부터 정렬
flex-end : 주축이 끝나는 위치부터 정렬
center: 주축을 기준으로 가운데부터 정렬
space-between : 동일한 간격으로 시작과 끝은 여백 없이 정렬
space-around : 시작과 끝의 여백 포함해 동일한 간격으로 정렬

ㄴ) align-items : 교차축 중 item이 1줄일 때 사용

전체 컨테이너의 입장에서 한줄 자체를 어디에 위치시킬건지 결정

align-items를 사용했는데 flex-wrap으로 2줄 이상으로 배치하는 경우, align-items는 임의로 전체 컨테이너를 한줄 한줄 나눠서 배치 → flex-end 값을 주었을때 이미지 처럼 한줄한줄을 끝에 배치

flex-start : 교차축의 시작에 배치
flex-end : 교차축의 끝에 배치
strech : 전체를 차지하도록 배치
center: 가운데에 배치

ㄷ) align-content : 교차축 중 item이 2줄일 때 사용

flex-start : 교차축의 시작 부분에 배치
flex-end : 교차축의 끝 부분에 배치
center: 교차축의 가운데 부분에 배치
space-between : 가운데에 동일한 간격으로 배치(시작과 끝에는 여백 미포함
space-around : 가운데에 동일한 간격으로 배치(시작과 끝에도 여백 포함)ㄹ) align-self : items을 정렬할 때 사용
하나의 item에 지정할 수 있음

2. grid

2차원의 개념으로 행과 열, gap으로 레이아웃을 구성

2-1) container

<style>
    .container{
        border: 5px solid orange;

        display: grid;
        /* grid-template-columns : 1fr 1fr 1fr; */
        grid-template-columns: repeat(5, 1fr)
        grid-template-rows: repeat(3, 1fr)
        grid-template-areas: 
            "hd hd hd hd"
            "ma ma . sb sb"
            "ft ft ft ft ft";
    }
    .item {
        background-color: skyblue;
        border: 3px solid blue;
        font-size: 30px;
    }
    .header{
        grid-area: hd
    }
    .main{
      grid-area: ma
    }
    .sidebar{
      grid-area: sd
    }
    .footer{
      grid-area: ft
    }
</style>
<body>
    <div class="container">
        <div class="item header">1</div>
        <div class="item main">2</div>
        <div class="item sidebar">3</div>
        <div class="item footer">4</div>
    </div>
<body>

ㄱ) grid-template-rows, grid-template-columns(명시적)

몇개의 행을 가지고, 몇개의 열을 가지는지 정함

fr : 컨테이너의 크기에 맞춰 비율을 주는 것
grid-template-columns / grid-template-rows : px, fr등으로 각각의 열과 행의 너비를 정해줌
ㄴ) grid-template-areas
item들이 차지 하는 영역을 설정하되 반드시 네모 영역으로 설정해줘야 함
ㄷ) row-gap, column-gap
행들간의 간격, 열들간의 가격을 설정
ㄹ) grid-auto-rows, grid-auto-columns(암시적)
template이 넘쳤을때 배정되는 item들에게 지정하고 싶은 row의 행 높이와 column의 열 너비 사이즈를 설정
template 내에서 넘치는 부분이 없다면 화면에서 grid-auto-rows는 확인 불가
ㅁ) grid-auto-flow
item들의 배치를 결정
기본값은 row
값을 column으로 변경하는 경우 위에서 아래로 items가 배치됨
값 dense로 변경하는 경우 빈 영역 없이 items들을 배치

2-2) container 정렬

ㄱ) justify-content

메인축에서 어떻게 배치할지 결정

선행 조건

바깥 컨테이너의 크기가 안쪽 컨테이너의 크기보다 작아 남는 공간이 필요

남는 부분을 어떻게 사용할지 정의

<style>
.container{
  border: 5px solid orange;
  width: 100%;
  height: 500px;

  display: grid;
  grid-template-columns: repeat(3, 100px)
  grid-template-rows: repeat(3, 100px)
}
.item {
  background-color: skyblue;
  border: 3px solid blue;
  font-size: 30px;
}
</style>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<body>

start, end, center, space-around, space, between의 값을 사용

ㄴ) align-content

교차축의 어느 위치에 배치할 건지 결정

start, end, center, space-around, space-between의 값을 사용

ㄷ) justify-items, align-items

하나의 틀에서 각각의 아이템에 대한 정렬

2-3) item

ㄱ) grid-row, grid-column

행과 열의 개수가 아닌 선의 번호로 구분(개발자도구에서 grid클릭시 숫자 확인 가능)
grid(column)-row : grid-row(column)-start, grid-row(column)-end 속성을 가짐
ㄴ) grid-area
grid-template-areas가 사용하는 area의 이름을 입력시 영역에 grid 이름이 지정됨

'Dev-log > CSS' 카테고리의 다른 글

CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

jerry