flex css 속성은 viewport나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬할 수 있는 방법을 제공하는 layout이다.
복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치시킬 수 있다는 큰 장점이 있다.
내가 정렬을 하고자 하는 요소를 지니고 있는 부모요소
에게 display:flex;
를 선언한다.
.flexbox {
display: flex;
/* flex | inline-flex */
}
.flexbox {
display: flex;
flex-direction: row;
/* row | row-reverse | column | column-reverse */
}
출처: WEBDIR :: CSS Flex 속성
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* nowrap(기본값) | wrap */
}
(1) nowrap: 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해버린다.
/* 부모요소 */
.flex-container {
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* 자식요소 */
.flex-items {
width: 200px;
}
(2) wrap: 한 줄에 모두 정렬할 공간이 없으면 다음줄(여러줄)로 넘어간다.
/* 부모요소 */
.flex-container {
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* 자식요소 */
.flex-items {
width: 200px;
}
(1) Main axis일 경우 justify-content 사용
.flex-container {
background-color: wheat;
margin: 0 auto;
width: 1000px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
/* flex-start | flex-end | center | space-between | space-around */
}
(2) Cross axis일 경우 align-itmes, align-content 사용
⭐차이점파악⭐
1) align-itmes일 경우
.flex-container {
background-color: wheat;
margin: 0 auto;
width: 600px;
height: 800px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
2) align-content일 경우
align-content을 사용할 땐 flex-wrap: wrap;
이여야 한다.
.flex-container {
background-color: wheat;
margin: 0 auto;
width: 600px;
height: 800px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
flex로 정렬된 요소들에게 순서를 지정하여 위치를 바꿀 수 있다.
.flex1 {
background-color: red;
order: 3;
}
.flex2 {
background-color: yellow;
order: 1;
}
.flex3 {
background-color: blue;
order: 2;
}