Flexbox

Flexbox를 사용하여 박스를 늘리거나 줄여 레이아웃을 구성할 수 있다.

Flex Layout

Flex 레이아웃을 만들기 위한 HTML 구조는 다음과 같다.

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

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

display: flex

display: flex는 부모 요소에 적용하여 자식 요소의 크기나 방향을 결정하는 레이아웃 구성 방법이다.
Flex 컨테이너에 display: flex;를 적용해 시작한다.

.container {
	display: flex;	
}

⠀

<!-- 3개의 div 요소를 자식으로 가진 mian 요소-->
  <main>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
  </main>

<!-- CSS-->
    main {
     border: 1px solid red;
     background-color: yellow;
    }
    div {
      border: 1px solid blue;
      background-color: powderblue;
    }
    * {
      margin: 10px;
      paddong: 10px;
    }

⠀
위 코드를 실행하면 아래와 같은 결과가 나온다. div 요소는 별다른 설정을 하지 않으면 위에서부터 세로로 정렬되고, 가로로 넓은 공간을 차지한다.

⠀
아이템이 배치된 방향의 축은 메인축(Main Axis), 메인축과 수직인 축은 교차축(Cross Axis)이라 한다.

Flex Property

flex-direction : 축의 방향

아이템이 배치되는 축의 방향을 결정하는 속성이다. 메인축의 방향을 가로로 할건지, 세로로 할건지를 결정한다.
아무 설정도 하지 않으면 기본값인 가로 정렬이 된다.

justify-content

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

align-items

교차축 방향으로 아이템을 정렬하는 속성이다.
justify-content와 수직 방향의 정렬이다.

flex-wrap

컨테이너가 아이템을 한 줄에 담을 여유 공간이 부족할 때, 아이템 줄바꿈을 결정하는 속성이다.

---

참고 자료

1분 코딩
Oh린이의 소확행

Flexbox 연습하기

Flexbox Froggy

CSS Grid

1분 코딩

---

이미지 출처

HEROPY Tech
lincolnloop