CSS Flex Property

Flex는 부모 자식 관계에 설정이 가능하며, 부모에게 display:flex 속성을 주면 자식들은 해당 속성의 세부 설정에 따라 정렬된다. 이렇게 flex가 적용된 자식은 항상 자기 컨텐츠 만큼의 넓이(최소 넓이)만을 가지게 된다.

 

 

(1) flex-direction

HTML

    <div class="test">

      <span>테스트01</span>

      <span>테스트02</span>

      <span>테스트03</span>

    </div>

 

SCSS

.test {

  display: flex;

  flex-direction: row;

  width: 800px;

  height: 100px;

  background-color: rgba(0, 0, 0, 0.1);

  > span {

    border: 1px red solid;

  }

}

 

①flex-direction: row

row: 요소들을 텍스트의 방향과 동일하게 정렬한다.

 

 

②flex-direction: row-reverse

row-reverse:&nbsp;요소들을&nbsp;텍스트의&nbsp;반대&nbsp;방향으로&nbsp;정렬한다.

 

 

③flex-direction: column

column:&nbsp;요소들을&nbsp;위에서&nbsp;아래로&nbsp;정렬한다.

 

 

④flex-direction: column-reverse

column-reverse:&nbsp;요소들을&nbsp;아래에서&nbsp;위로&nbsp;정렬한다.

 

 

 

 

 

(2) justify-content

SCSS

.test {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  width: 800px;

  height: 100px;

  background-color: rgba(0, 0, 0, 0.1);

  > span {

    border: 1px red solid;

  }

}

 

①justify-content: flex-start

flex-start:&nbsp;요소들을&nbsp;컨테이너의&nbsp;왼쪽으로&nbsp;정렬한다.

 

②justify-content: flex-end

flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.

 

③justify-content: center

center: 요소들을 컨테이너의 가운데로 정렬한다.

 

④justify-content: space-between

space-between: 요소들 사이에 동일한 간격을 둔다.

 

⑤justify-content: space-around

space-around: 요소들 주위에 동일한 간격을 둔다.

 

 

 

(3) align-items

SCSS

.test {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: flex-start;

  width: 800px;

  height: 100px;

  background-color: rgba(0, 0, 0, 0.1);

  > span {

    border: 1px red solid;

  }

}

 

①align-items: flex-start

flex-start: 요소들을 컨테이너의 꼭대기로 정렬한다.

 

②align-items: flex-end

flex-end:&nbsp;요소들을&nbsp;컨테이너의&nbsp;바닥으로&nbsp;정렬한다.

 

③align-items: center

center:&nbsp;요소들을&nbsp;컨테이너의&nbsp;세로선&nbsp;상의&nbsp;가운데로&nbsp;정렬한다.

 

④align-items: baseline

baseline:&nbsp;요소들을&nbsp;컨테이너의&nbsp;시작&nbsp;위치에&nbsp;정렬한다.

 

⑤align-items: stretch

stretch:&nbsp;요소들을&nbsp;컨테이너에&nbsp;맞도록&nbsp;늘린다.

 

 

 

(4) flex-wrap

SCSS

.test {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: stretch;

  flex-wrap: nowrap;

  width: 200px;

  height: 100px;

  background-color: rgba(0, 0, 0, 0.1);

  > span {

    border: 1px red solid;

  }

}

 

①flex-wrap: nowrap

nowrap:&nbsp;모든&nbsp;요소들을&nbsp;한&nbsp;줄에&nbsp;정렬한다.

②flex-wrap: wrap

wrap:&nbsp;요소들을&nbsp;여러&nbsp;줄에&nbsp;걸쳐&nbsp;정렬한다.

③flex-wrap: wrap-reverse

wrap-reverse:&nbsp;요소들을&nbsp;여러&nbsp;줄에&nbsp;걸쳐&nbsp;반대로&nbsp;정렬한다.

 

 

 

 

 

(5) flex-flow

flex-flow flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있다.
이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있다.