css flexbox
flexbox: 요소를 넣고 공간을 추가하고 분할하면서 웹페이지 공간을 구성하는 데 매우 유용한 속성.
구체적인 css속성을 외우는 것보다 개념을 익히는 데 집중하라.
원리에 대한 개념을 잡으면 어떤 속성을 써야 할지 정확히 기억하지 못한다 해도 아주 큰 도움이 된다.
어떻게 돌아가는지 알면 mdn 검색해서 알아낼 수 있다.
조각들이 어떻게 맞물리는 지 원리를 이해하지 못하면 매우 어렵다
생긴지 얼마 안되었지만 표준화된 CSS속성
→ 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 쓰인다.
Flex 속성
#section {
display: flex;
}컨테이너에 flexbox속성을 주면 거기 포함된 요소들이 블록단위여도 좌우로 정렬된다.
flexbox 안에는 두 축이 있다. 주축 main axis, 교차축cross axis.
main axis의 기본방향은 좌에서 우. cross axis는 상하이다.
주축(main axis)를 상하로 바꾸면 교차축(cross axis)는 좌우가 된다.
flex-direction: row; 기본값. 좌에서 우.
flex-direction: row-reverse;우에서 좌로 바뀐다.
flex-direction: column;상하로 바꿀수도 있다. column-reverse는 반대.
flex로 하면 그 안에 요소가 상위 단계 컨테이너를 벗어나지 않고 가득차게 된다.
justify-content
주축을 기준으로 요소와 콘텐츠를 어떻게 정렬할지 결정하는 속성
그 자체로 수직이나 수평이 아니다. 그것은 flex-direciton에 따름.
사실 justify보다는 alignment정렬이 더 맞는 이름.
디폴트는
justify-content; flex-start;만약 flex-direction이 row라면 왼쪽으로 정렬.
flex-end로 하면 오른쪽으로 정렬.
justify-content: center;로 하면 중앙 정렬.
justify-content: space-between;으로 하면 바깥 여백 없이 요소 사이 간격을 띄움.
justify-content: space-around;로 하면 요소의 둘레에 똑같은 여백을 배치한다.
justify-content: space-evenly;요소 사이, 요소와 컨테이너 사이에 동일한 여백을 주는 방식.
flex-wrap
주축이 수평일 때 새로운 행을 만들어 요소를 정렬하고
주축이 수직일 때 새로운 열을 만들어 요소를 정렬하는 속성.
또한 교차축의 방향을 결정한다.
flex-wrap: wrap;을 주면 요소가 찌그러지지 않고 다음 행, 또는 다음 열에 정렬된다.
flex-wrap: wrap-reverse;라면 교차축이 반대로 된다.
주축이 좌→우 라면 wrap을 주면 그 밑에 행이 생긴다.
주축이 좌→우 인데 wrap-reverse를 주면 시작한 곳보다 위에 새로운 행이 생긴다.
flex-wrap: nowrap;이라면 새로운 행, 새로운 열로 넘어가지 않고 그냥 꽉차기만 한다.
align-items
교차축을 따라 아이템을 배열한다.
justify-content는 주축을 따르고 align-items는 교차축을 따른다.
상하, 좌우 고정된건 아님.
align-items: flex-start;디폴트. 이건 교차축의 시작점을 기준으로 한다.
flex-end라면 교차축의 끝점에 맞춰 정렬
center는 중앙 정렬.
align-items: baseline;이건 텍스트의 기준선에 맞춰 정렬함. 각 글자를 잇는 밑줄을 긋는다고 생각하라. 요소마다 높이가 다르면 유용함. 텍스트가 있는 요소를 정렬할때 사용.
align-content
행이나 열이 여러 개일때 교차축을 기준으로 정렬하기.
여러 행, 여러 열이 있을 때만 사용하는 정렬 방법. 단일행,열이면 아무것도 변하지 않는다.
flex-wrap이 wrap또는 wrap-reverse여야 적용된다.
주축이 수직이라면 align-content는 열 사이 공간을 조정.
주축이 수평이라면 행 사이 공간을 조정.
align-content: flex-start;교차축 시작부터 붙여버림.
space-between은 바깥 여백 없이 띄움.
flex-end; center;모두 가능.
align-self
flex컨테이너가 아닌 개별 요소에 사용한다.
교차축을 기준으로 배열된 단일 요소의 위치를 바꾼다.
div:nth-of-type(3) {
align-self: center;
}3번째 div만 가운데로 정렬
flex-basis
요소가 배치되기 전에 요소의 최초 크기를 결정.
플렉스 컨테이너에 추가되기 전 시작점.
주축에 따라 너비가 될수도, 높이가 될수도 있다.
flex아이템에 설정된 너비 값보다 더 큰 컨텐츠가 들어가면 flex-basis는 늘어난다. 유연함.
flex-grow
빈 공간이 있을때 요소가 그 공간을 얼마나 차지할지 결정
div:nth-of-type(3) {
flex-grow: 1;
}3번째 div가 1의 비율로 빈 공간을 차지. 늘어난다.
max-width나 max-height를 설정하면 늘어나는 한계를 설정가능.
flex-shrink
컨테이너에 충분한 공간이 없을때 요소들이 줄어드는 비율을 통제.
이건 flex-grow처럼 숫자 비율을 주면 높은 숫자를 넣을수록 더 크게 줄어든다. 다른 요소에 비해 얼마나 더 줄어들지 설정하는 것.
0으로 주면 전혀 줄어들지 않는다.
flex 속기법
flex: 2;flex-grow
flex: 2 20px;flex-grow | flex-basis
flex: 2 2;flex-grow | flex-shrink
flex: 2 2 10%flex-grow | flex-shrink | flex-basis
Responsive Design
반응형 디자인. 디스플레이 크기에 따라 바뀌도록.
Media Queries
미디어 쿼리. 스크린 너비나 디바이스 에따라 스타일을 변경할수 있게 해준다.
미디어 쿼리는
@media (max-width: 800px) {
.sidebar {
display: none;
}
.main {
width: 80%;
}
}
//800px 이하에선 sidebar표시안됨. main은 너비 80%.@media로 시작한다. 괄호 안에 미디어 기능을 다양하게 넣을 수 있다.
너비는 뷰포트 너비. 뷰포트는 컴퓨터 그래픽에 있는 폴리곤 영역.
@media (min-width: 600px) and (max-width: 800px) {
}
//600이상 800이하에서두개도 가능. 보통 최소너비 min-width를 쓴다.
@media (orientation: landscape)가로 방향일때.
그외에도 기능이 많다. mdn에서 검색.
표준중단점 이란게 있다.
Using min-width
예를들어 576px까지는 모바일 세로 화면. 정답은 아니지만 많이 쓰임.
