Flexbox - 요소의 정렬되는 방향, 순서, 요소 간의 간격을 수치적으로 처리하지 않아도 자동으로 유연하게 처리해주는 형식
★ flexbox를 이용할 때 반드시 알아야 하는 것! 1) flexbox의 구성 - flex-container : 정렬이 필요한 요소를 감싸는 요소 - item : 정렬을 적용할 요소 2) flexbox의 축 - 중심 축(main axis) - 교차 축, 반대 축(cross axis)
.flex-container {
background-color: #ddd;
height: 700px;
display: flex;
/* item(내부 요소)를 감싸는 요소의 형식을 flex로 변경
-> item에 자동으로 지정된 margin 요소가 모두 사라지고,
content 영역 만큼의 크기만 가지게 됨
item에 별도의 width/height가 지정되어 있지 않다면,
item의 높이는 flex-container의 너비/높이와 같아지게 된다.
(flex-container 정렬 방향에 따라 다름)
*/
}
/* ******************************************* */
/* flex-direction */
/* ******************************************* */
/* (flex-container 전용 속성)
main axis의 방향과 시작 위치를 지정하는 속성
*/
/* 행 방향(가로, 기본값) */
flex-direction: row;
/* ******************************************* */
/* flex-direction */
/* ******************************************* */
/* (flex-container 전용 속성)
main axis의 방향과 시작 위치를 지정하는 속성
*/
/* 행 방향(가로) + 순서 반대 */
flex-direction: row-reverse;
/* ******************************************* */
/* flex-direction */
/* ******************************************* */
/* (flex-container 전용 속성)
main axis의 방향과 시작 위치를 지정하는 속성
*/
/* 열 방향(세로) */
flex-direction: column;
/* ******************************************* */
/* flex-direction */
/* ******************************************* */
/* (flex-container 전용 속성)
main axis의 방향과 시작 위치를 지정하는 속성
*/
/* 열 방향(세로) + 순서 반대 */
flex-direction: column-reverse;
/* ******************************************* */
/* flex-warp */
/* ******************************************* */
/* 내부 item들을 포장하는 속성
item들이 강제로 한 줄에 배치되게 할 것인지
flex-container가 줄어들면
한 줄을 벗어나 여러 줄로 배치할 것인지를 지정
*/
/* item 한 줄로 배치(기본값) */
flex-wrap: nowrap;
/* ******************************************* */
/* flex-warp */
/* ******************************************* */
/* 내부 item들을 포장하는 속성
item들이 강제로 한 줄에 배치되게 할 것인지
flex-container가 줄어들면
한 줄을 벗어나 여러 줄로 배치할 것인지를 지정
*/
/* item을 여러 줄로 배치 */
flex-wrap: wrap;
/* ******************************************* */
/* flex-warp */
/* ******************************************* */
/* 내부 item들을 포장하는 속성
item들이 강제로 한 줄에 배치되게 할 것인지
flex-container가 줄어들면
한 줄을 벗어나 여러 줄로 배치할 것인지를 지정
*/
/* item들을 여러 줄로 배치(뒤에서부터 배치) */
flex-wrap: wrap-reverse;
/* ************************************** */
/* flex-flow */
/* ************************************** */
/* flex-container의 main axis의 방향, 순서와
여러 줄로 배치할지에 대한 여부를 한 번에 설정하는 속성
-> flex-direction + flex-wrap 합쳐진 모양
*/
/* (flex-direction / flex-wrap) */
flex-flow: row-reverse wrap;
/* *************************************** */
/* justify-content */
/* *************************************** */
/* justify : 조정하다
justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방향을 조정함
*/
/* main axis 시작 지점을 기준으로 정렬(기본값) */
justify-content: flex-start;
/* *************************************** */
/* justify-content */
/* *************************************** */
/* justify : 조정하다
justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방향을 조정함
*/
/* main axis 끝 지점을 기준으로 정렬 */
justify-content: flex-end;
/* 순서가 달라지는 flex-direction : row-reverse와 구분하기!! */
/* *************************************** */
/* justify-content */
/* *************************************** */
/* justify : 조정하다
justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방향을 조정함
*/
/* main axis 가운데 정렬 */
justify-content: center;
/* *************************************** */
/* justify-content */
/* *************************************** */
/* justify : 조정하다
justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방향을 조정함
*/
/* item 주위에 main axis 방향 양쪽으로
일정한 크기의 공간을 추가
-> 양 끝은 조금, item 중간은 넓게 떨어져 있음 */
justify-content: space-around;
/* *************************************** */
/* justify-content */
/* *************************************** */
/* justify : 조정하다
justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방향을 조정함
*/
/* item이 main axis 내에서 동일한 간격을 가짐 */
justify-content: space-evenly;
/* *************************************** */
/* justify-content */
/* *************************************** */
/* justify : 조정하다
justify-content : 내용을 조정하다
-> main axis 방향으로
item(내용)의 정렬 방향을 조정함
*/
/* space-evenly에서 양 끝을 flex-container에 붙게 함 */
justify-content : space-between;
/* **************************************** */
/* align-items */
/* **************************************** */
/* item들을 cross axis(반대축, 교차축) 방향으로
정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함(기본값)
조건 : item의 cross axis 방향의
크기 지정 속성이 없어야 함
*/
align-items: stretch;
item의 크기 지정 없앨 경우, stretch 적용됨
/* **************************************** */
/* align-items */
/* **************************************** */
/* item들을 cross axis(반대축, 교차축) 방향으로
정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함(기본값)
조건 : item의 cross axis 방향의
크기 지정 속성이 없어야 함
*/
/* cross axis 시작 지점을 기준 */
/* (stretch 처럼 늘어나지 않고 content 크기를 유지) */
align-items: flex-start;
/* **************************************** */
/* align-items */
/* **************************************** */
/* item들을 cross axis(반대축, 교차축) 방향으로
정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함(기본값)
조건 : item의 cross axis 방향의
크기 지정 속성이 없어야 함
*/
/* cross axis 끝 부분을 기준 */
align-items: flex-end;
/* **************************************** */
/* align-items */
/* **************************************** */
/* item들을 cross axis(반대축, 교차축) 방향으로
정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함(기본값)
조건 : item의 cross axis 방향의
크기 지정 속성이 없어야 함
*/
/* cross axis 가운데 기준 */
align-items: center;
/* **************************************** */
/* align-items */
/* **************************************** */
/* item들을 cross axis(반대축, 교차축) 방향으로
정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함(기본값)
조건 : item의 cross axis 방향의
크기 지정 속성이 없어야 함
*/
/* item 내부 content가 모두 한 줄에 배치될 수 있도록
item 요소를 cross axis로 움직이는 설정
*/
/* align-items: baseline; 실습 */
.item2{padding: 10px;}
.item3{padding: 20px;}
.item4{padding: 30px;}
/* **************************************** */
/* item들을 cross axis(반대축, 교차축) 방향으로
정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를
cross axis 방향으로 늘려서
flex-container와 같은 크기를 가지도록 함(기본값)
조건 : item의 cross axis 방향의
크기 지정 속성이 없어야 함
*/
/* item 내부 content가 모두 한 줄에 배치될 수 있도록
item 요소를 cross axis로 움직이는 설정
*/
align-items: baseline;
}
/* align-items: baseline; 실습 */
.item2{padding: 10px;}
.item3{padding: 20px;}
.item4{padding: 30px;}
