먼저 따로 직접 해보기 위해 새로운 branch를 생성했다.
git branch <name> 을 하면 새로운 branch가 생성된 것을 볼 수 있다.git switch <name> 는 새로 만든 branch로 이동하도록 해준다.switch 외에도 git checkout <name> 으로도 이동할 수 있다.
이때 좌측 하단에 trainig 부분을 눌러서도 변경할 수 있다.
flex를 직접 실습하기 위해서 flex branch에서 css(style.css)파일을 복사해 training branch로 이동해 붙여넣기 해준다.
flex 직접해보기
어떤 값도 주지 않은 기본형태이다.
1. container에 display값 주기
그룹을 감싸고있는 main 클래스에 display: flex 값을 준다.
flex 값을 주면 요소들이 가로로 정렬이 된다. 이때 높이값을 따로 지정하지 않아 main이 가지는 높이만큼 꽉 채우고 늘어나게 된다.
2. flex-flow : 단축 속성, Flex Items의 주 축, Items의 여러 줄 묶음(줄 바꿈) 설정
flex-flow: 주축 여러줄 묶음;개별 속성
- flex-direction : Items의 주 축(main-axis)설정 (기본값: row)
- flex-wrap : Itemsdml 여러 줄 묶음(줄 바꿈)설정 (기본값: nowrap)
1) flex-direction
- row : 수평축(왼 -> 오)으로 표시 (기본값)
- row-reverse : row의 반대축으로 표시
- column : 수직축(위 -> 아래)로 표시
- column-reverse : column의 반대 축으로 표시
이때!
주 축(main-axis)과 교차 축(cross-axis)이란?
: 값 row는 Items를 수평축으로 표시하므로 주 축이 수평이고 교차 축은 수직이다.
반대로 column은 Items를 수직축으로 표시하므로 주 축은 수직이고 교차 축은 수평이다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.
2) flex-wrap : 여러 줄 묶음(줄 바꿈) 설정
기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다.
지정된 크기(주 축에 따라 width, height)무시하고 한 줄안에서만 가변한다.
줄바꿈 하기 위해서는 값으로 wrap을 사용해야 한다.
- nowrap : 모든 Items를 여러 줄로 묶지 않음(한 줄에 꽉채워서 표시) (기본값)
- wrap : Items를 여러 줄로 묶음
- wrap-reverse : Items를 wrap의 역방향으로 여러 줄 묶음
3. justify-content : 주 축(main-axis) 정렬 방법을 설정
- flex-start : 시작점으로 정렬
- flex-end : 끝점으로 정렬
- center : 가운데 정렬
- space-between : 시작 Items는 시작점, 마지막 Items는 끝점에 정렬, 나머지는 사이에 고르게 정렬
- space-around : 균등한 여백을 포함해 정렬
이때 여백 양끝과 그룹 사이의 여백을 동일하게 맞춰주기 위해서
padding값을 넣어주어 동일하게 맞춰준다. (아래그림과 같이 됨)
근데 padding을 주지않고도 맞출 수 있는 방법이 있다.
그건 바로 space-evenly 인데 이 값은 IE에서 적용되지 않기때문에 안쓰는게 좋다.
4. align-content : 교차 축(cross-axis) 정렬 방법
이건 flex-wrap 을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 때 사용 가능하다. (한줄일 경우엔 align-items 속성 사용)
- stretch : Container의 교차 축을 채우기 위해 Items를 늘림 (기본값)
- 교차 축에 해당하는 너비(width 혹은 height)값이 auto(기본값)일 경우 교차 축 채우기 위해 자동으로 늘어남
- flex-start : 시작점으로 정렬
- flex-end : 끝점으로 정렬
- center : 가운데 정렬
- space-between : 시작 Items는 시작점 마지막 Items는 끝점 정렬, 나머지는 사이에 고르게 정렬
- space-around : 균등한 여백 포함해 정렬
5. Flex Items
- order : Flex Items의 순서 지정
- flex : flex-grow, flex-shrink, flex-basis 단축 속성
- flex-grow : 증가 너비 비율 설정
- flex-shrink : 감소 너비 비율 설정
- flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정
- align-self : 교차 축(cross-axis)에서 정렬 방법 설정
1) order
아이템 순서를 설정한다. 숫자를 지정하고 숫자가 클수록 순서가 밀린다. (음수 허용)
HTML 구조와 상관없이 순서를 변경할 수 있어 유용하다.
원래 요소들은 모두 order: 0 의 값을 가진다.
이때 그룹2에 order: -1; 값을 주면 그룹1보다 앞에 위치하게 된다.
2) flex : Items의 너비(증가, 감소, 기본) 설정하는 단축 속성
- flex-grow : 남는 행 여백을 분배해 채움
Items를 담는 container에 적용된 값들이다.
Items에 각각의 너비를 줬고 기본상태는 이렇게 여백이 남는다.
이때 아이템들의 너비 합은 총 820px이다.
이렇게 두고 Items에 flex-grow값을 준다.
이때 각각의 너비는 290px, 380px, 270px이 된다.
영역을 채우는 방식은 이러하다.
플렉스 박스 안 아이템들에 적용된 flex-grow 속성 값의 합을 구한다. 이때 합은 3이다. (그룹1에 1, 그룹3에 2를 줬음)
플렉스 박스의 남는 여백을 3으로 나눈다.
이때 총 940px에서 세 박스의 합인 820px을 빼면 남는 여백의 값은 120px이다.
120px을 3으로 나누면 40px이 나오게 된다.
flex-grow 속성 값을 기준으로 비율 만큼씩 아이템 너비에 더해준다.
즉, 원래 그룹1의 너비였던 250px에 "flex-grow : 1" 을 줬으므로 40px을 더해 총 290px이 된다.
그룹2의 너비 380px에 "flex-grow: 0"을 줘서 더할 필요 없이 총 너비는 380px이 된다.
그룹3의 너비 190px에 "flex-grow: 2"를 줘 40px * 2 = 80px을 더해 총 270px이 된다.
