display: flex

IE11 버전 이상에서 작동
반응형웹 스타일 작성에 용이하다
박스 가로 배치 적용하기 쉽다

.item-wrap {
    display: flex; //부모 요소에 flex
    flex-wrap: wrap;
    justify-content: center; //가운데정렬
    //height: 300px;
    //align-items: center;
}
.item {
   width: 100%;
}

flex 속성 1.부모 요소 적용

justify-content : 가로정렬

• center
• flex-start
• flex-end
• space-between
• sapce-around (등등)

flex-direction : 세로배치

• column
• column-reverse
• row
• row-reverse (등등)

flex-wrap : width가 넘치면 밑으로 보낼지 정할 때

• wrap
• no-wrap
• wrap-reverse

align-items : 상하정렬

• center
• stretch
• flex-end
• flex-start (등등)

align-content: 상하정렬

• center
• stretch
• flex-end
• flex-start (등등)

align-items, align-content의 차이

두 속성은 수직(상하)방향을 기준으로 정렬한다.
단, align-conent 는 flex-wrap: wrap인 경우에만 사용할 수 있다. 즉 2줄이상일 때 정렬이 가능하다.

• align-items: 한줄을 기준으로 정렬
• align-content: 두줄을 기준으로 정렬

flex-wrap: wrap 을 적용한 경우 차이점

1.align-content : 2줄 기준으로 정렬

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 500px;
}

2.align-items : 1줄 기준으로 정렬

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 500px;
}

flex 속성 2. 자식 요소 적용

flex-grow : 박스 크기를 비율로 설정
배수 입력 ex) 2 => flex-grow 지정해준 다른 요소의 2배