Flexbox

노마드 코더 CSS Layout 마스터클래스를 수강하며 정리한 글입니다

Flex container

flex container

1. flex container를 사용해 flex children의 위치 변경
2. display : flex 로 flex container 생성

    <div class="box-wrapper"> /*flex container*/
        <div class="box">1</div> /*flex child*/
        <div class="box">2</div> /*flex child*/
        <div class="box">3</div> /*flex child*/
    </div>

.box-wrapper { /*flex container*/
  display: flex;

}

.box { /*flex children*/
  background: blue;
  width: 300px;
  height: 300px;
  display: inline-block;
  color: white;
}

flex direction

flex direction

1. row (default) :
수평축 (가로) : main axis
수직축 (세로) : cross axis
2. column :
수평축 (가로) : cross axis
수직축 (세로) : main axis
3. 주의
flex container에 충분한 높이가 지정되어야 그에 맞는 가로 방향 이동 가능

justify-content & align-items

flex child 이동 지정
(default flex direction : row 기준)
1. justify-content
: main axis에서 flex child의 이동 지정

2. align-items
: cross axis에서 flex child의 이동 지정

align-self & order

align self
flex container를 사용하지 않고 flex child 위치를 직접 변경하는 경우
align-self는 align-item과 동시에 cross axis 방향에서 동작

order

HTML로 순서를 바꾸기 어려운 경우 사용
default로 order가 0임

    <div class="box-wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

.box-wrapper {
  display: flex;
  flex-direction: row; /*default : 가로(main axis) & 세로 (cross axis)*/
  /*Main axis*/
  justify-content: space-around;
  font-size: 50px;
  height: 100vh;
}
.box:nth-child(1) {
  align-self: flex-start; /*자식에서 위치 직접 이동*/
  order: 2;
}
.box:nth-child(2) {
  align-self: center; /*자식에서 위치 직접 이동*/
  order: 1;
}
.box:nth-child(3) {
  align-self: flex-end; /*자식에서 위치 직접 이동*/
  order: 0; /*default 값*/
}
.box {
  background: blue;
  width: 300px;
  height: 300px;
  display: inline-block;
  color: white;
}

flex container와 flex child에 모두 display : flex 하면 글자가 중앙에 위치

flex-wrap

flex-wrap
직접 지정한 width 지키기보다는 한 줄로 정렬하는 것을 우선시 함

nowrap : 모든 child를 한 줄 정렬
wrap : 지정된 child size 유지해 (여러 줄) 정렬
wrap-reverse : child를 여러 줄에 걸쳐 아래부터 위로 정렬

flex-direction

flex-direction
child 요소의 정렬 방향 지정

row : default 값
row-reverse : 오른쪽부터 시작해 정렬
column : 위에서 아래로 정렬
column-reverse : 아래부터 시작해 정렬

align-content

align-content
wrap으로 정렬하며 생기는 여러 줄 사이의 간격을 조정

flex-grow

flex-grow
각 flex child에 지정해 화면이 늘어날 때 여백 생기면 해당 공간을 채우는 확장

flex-grow : 1 (default)
별도의 특정 값 설정 X -> 화면이 늘어나 여백 생겨도 채워지지 않음

flex-shrink

flex-shrink
화면이 작아지면서 flex container가 좁아질 때 flex child의 행동 정의
flex-wrap : nowrap
화면은 작아지면서 특정 값으로 width 설정되어 있어서도 지키지 않고 한 줄 나열
flex-shrink : 2
-> 여러 child 중 해당 child만 2배 더 감소

flex-basis

flex-basis
shrink와 grow 전 초기 size 지정
main axis가 row이면 width 값이고 column이면 height 값임