Flex box
CSS의 display속성 중 하나인 flex는 박스 레이아웃을 작성할때 사용된다.
width나 height를 지정하지 않고, 간단하게 균형잡힌 배치가 가능하여 요소의 크기와 순서를 유연하게 배치할 수 있다.
.flex_container {
display: flex;
}
flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다.
- flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
- flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order
필수 지정 속성
1. display : flex;
2. flex-direction : 방향;
flex를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 css 속성이 있다.
display : flex;
- flex 레이아웃을 적용한다.
flex-direction : column; (row || column || row-reverse || column-reverse)
- 내부 요소들의 정렬 방향
- row는 가로방향 정렬
- column은 세로방향 정렬
- reverse는 각 방향의 반대에서부터 정렬
활용예시
.flex-col-center {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
필수지정속성
1. display: flex; 2. flex-direction : 방향; flexbox를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 CSS 속성이 있습니다. 아래 속성들은 부모 엘리먼트에 적용해야한다! display: flex; - flex 레이아웃을 적용 flex-direction : row; (row || column || row-reverse || column-reverse) - 내부 요소들의 정렬 방향 - row 는 가로방향 정렬 - column 은 세로방향 정렬 - reverse 는 각 방향의 반대에서 부터 정렬됨.
출처
