Flex Box

Flex Box

: Flex Box는 효율적을 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. 복잡한 계산없이 요소의 크기와 순서를 유연하게 배치할 수 있다. 별도의 분기 처리를 줄일 수 있으며 CSS만으로 다양한 레이아웃을 구현할 수 있다.

 

Flex 구성

: flexbox는 우리가 배치하고 싶은 HTML 요소인 flex item과 이것을 감싸는 flex container로 구성된다.

flex container : flex item을 감싸는 요소

flex item : flex conainer의 자식 요소

 

flex box 만들기

.flex-container {

   display: flex;

   }

부모요소가 inline인 경우 inline-flex를 지정한다.

 

flexbox 주축

flex container의 flex-direction 속성으로 결정된다.

row : 기본값으로 왼쪽에서 오른쪽으로 item이 정렬된다.

column : 주축의 방향이 위에서 아래로 item이 정렬된다.

---

flexbox 속성분류

flex container

: 전체적인 정렬이나 흐름에 관련된 속성을 정의한다.

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-item
• align-content

flex item

• flex
• flex-grow
• flex-shirnk
• flex-basis
• order

---

flex container

flex-direction

: 주축 main-axis 방향을 설정한다.

row : 좌에서 우로 수평 배치

column: 위에서 아래로 수직 배치

column-reverse: 아래에서 위로 수직 배치

 

flex-wrap

: flex-item 요소들을 한 줄로 또는 여러 줄로 배치한다. flex container의 width 보다 flex item들의 width 합계가 더 큰 경우, 여러줄로 표현할지 결정한다.

nowrap : 아이템들을 개행하지 않고 1행에 배치한다. 기본값이ㅏㄷ.

wrap : flex item들의 합계 너비가 flex container의 너비보다 넓은 경우, 개행하여 배치한다.

wrap-reverse : 아래에서 위로 배치된다.

 

flex flow

: flex-direction과 flex-wrap의 단축 속성이다. 기본값은 row nowrap 이다.

  flex-flow: row nowrap;

 

justify-content

: main axis를 기준으로 flex item을 수평 정렬한다.

• flex-start : main start(좌측)을 기준으로 정렬한다. 기본값
• flex-end : main end(오른쪽)을 기준으로 정렬한다.
• center : flex container 중앙에 정렬한다.
• space-between: start와 end 점의 좌우 측면에 정렬되고, 나머지 flex item은 균등한 간격으로 정렬된다.
• space-around : 모든 flex-item들이 균등한 간격으로 정렬된다.

    .flex-container {

      background-color: green;

      height: 100vh;

      display: flex;

      /* flex-direction: row;

      flex-wrap: wrap; */

      flex-flow: row nowrap;

      justify-content: space-around;

    }

 

align-content

: flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.

• stretch : 모든 flex item은 flex item의 행 이후, 균등하게 분배된 공간에 정렬되어 배치된다. 속성 기본
• flex-start : flex container의 cross start 기준으로 stack 정렬된다.
• flex-end : flex container의 cross end 기준으로 stack 정렬된다.
• center : cross axis의 중앙에 stack 정렬된다.
• space-between : 상하 끝에 배치 후 균등 분할
• space-around : 모든 flex item 균등 분할 배치

align-items

: flex item을 flex container의 수직방향(cross axis)으로 정렬한다. >>> 모든 flex item에 적용된다.

• stretch: 모든 flex item은 flex container의 높이(cross start ~ end까지)에 꽌찬 높이를 갖는다. 기본값
• flex-start
• flex-end
• center
• baseline : flex container의 base line을 기준으로 정렬된다.

>>> align-items는 flex line을 기준으로 정렬하는 반면, align-content는 flex line을 정렬한다.

 

---

flex item  속성

order : flex item 배치순서를 결정한다. 기본값은 0이다.

.flex-item { order : 정수값 ; }

 

flex-grow : 너비에 대한 확대 인자 (몇 배로 확대할꺼냐)

.flex-item { flex-grow: 양의정수값 ; }

 

flex-shrink

flex item의 너비에 대한 축소 인자를 결정한다. 기본값 1이고, 0을 지정하면 축소가 해제되어 원래의 너비를 유지한다.

 

flex-basis

: flex item의 너비값을 설정한다. px이나 % vw 등으로 설정한다. 기본값 auto

 

flex 

: flex-grow, flex-shrink, flex- basis 속성의 단축속성

flex: 2 2 auto;

 

align-self

:align-items 속성보다 우선하여 개별 flex item을 정렬한다.

align-self: flex-end;