html 정렬하기 flex

목차

 

여기 garden태그 안에 content가 있다.

<div class="garden">
  <div class="content"/>
</div>

나는 이 content를 garden 영역 안에서 다른 곳으로 배치하고 싶다.

이때 우리는 flex를 쓴다.

flex

flex는 해당 태그의 콘텐츠를 나열하는 방식을 설정한다.

이를 위해 일단 나열한다는 선언을 해야 한다.

 

.garden{
  display: flex;
}

그런 다음 가로로 나열할지, 세로로 나열할 방향을 설정해야 한다.

flex-direction

이때 가로는 row, 세로는 column이다.

<div class="garden">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

.garden{
  display: flex;
  flex-direction: row;
}

.garden{
  display: flex;
  flex-direction: column;
}

align-items

flex-direction과 수직방향의 나열을 설정한다.

종류로는 center, flex-start,  flex-end가 있다.

 

center

flex-end

flex-start

justify-content

flex-direction과 같은 방향으로의 나열을 설정한다.

align-items과 같이 center, flex-end, flex-start가 있으며,

콘텐츠를 같은 간격으로 나열하는

space-between

콘텐츠의 주위를 같은 간격으로 나열하는

space-around가 있다.

align-items에는 space-between, space-around가 없다.

이것이, flex-direction을 정하는 이유이다.

끝