[CSS] 플렉스 Flexbox, 반응형 웹을 위해
반응형웹을 위한 플렉스(Flex)
플렉스(flex)는 크기가 다른 스크린에서도 왠만하면 정돈되서 보여준다.
반응형 웹을 만들기위해 기본이 되는 요소인것 같다.
사용법
display: flex;
flex-direction 정렬 방향을 정하자
- row (기본값): 높이가 꽉차고 옆으로 정렬된다
- row-reverse: 마찬가지로 높이가 꽉차고, 반대 순서로 정렬된다.
- column: 양옆넓이가 꽉차고 위에서 위아래로 정렬된다.
- column-reverse: column에서 반대방향으로 정렬
예)
display: flex;
flex-direction: row-reverse;
justify-content 플렉스 안에 콘텐츠 정렬 방법을 전하자
- flex-start: (기본값) 왼쪽에서(정렬방향이 column일경우 위)부터
- flex-end: 오른쪽에서(정렬방향이 column일경우 아래)부터
- space-between: 양쪽 끝으로 정렬
- space-around: 양쪽 끝에 여백을 주고 정렬
- space-evenly: 여백을 똑같이 주면서 정렬
예)
display: flex;
flex-direction: row; //(기본값이면 생략가능)
justify-content: center;
align-items 위의 justify-content와 정렬방향이 반대
justify-content가 x축이면 y축,
justify-content가 y축이면(flex-direction으로 column 정렬시) align-items는 x축으로 정렬을 해준다.
- flex-start: 맨 위에 붙여서 정렬(column일경우 맨 왼쪽)
- flex-end: 맨 아래 붙어서 정렬(column일 경운 오른쪽)
- center: 정 가운데 위치
- stretch: (기본값) flex 컨테이너를 꽉 채워서 정렬된다
- baseline: flex-start와 비슷하다, 글자가 위치한 첫 줄에 정렬
예)
display: flex;
flex-direction: row; //(기본값이면 생략가능)
align-items: center;
flex-wrap 자동 줄바꿈을 도와줘~~
기본적으로 flex는 컨테이너의 크기에 맞춰 줄어든다.
하지만 요소에 크기에 맞춰 다음줄에 내려가도록 할 때 사용
- nowrap: (기본값) 컨테이너에 꽉 채워져서 늘어나고 줄어든다
- wrap: 플렉스박스에 들어간 요소의 크기에 맞춰서 다음줄로 자동으로 내려감
- wrap-reverse: wrap의 역방향
display: flex;
flex-direction: row; //(기본값이면 생략가능)
flex-wrap: wrap;
flex-shrink 줄어드는 정도를 조정
앞서 말했듯이 플렉스안의 요소는 줄어들고 늘어난다.
flex-shrink의 값이 높으면 더 많이 줄어든다.
밑의 예의 #box2가 더 많이 줄어든다
#box1 {
display: flex;
flex-shrink: 1;
}
#box2 {
display: flex;
flex-shrink: 2;
}
flex-grow 늘어다는 정도를 조정
flex-shrink와 반대
밑의 예의 #box2가 더 많이 자리를 차지한다
#box1 {
display: flex;
flex-grow: 1;
}
#box2 {
display: flex;
flex-grow: 2;
}
flex-basis 요소의 기본 크기를 정해준다
flex-shrink와 flex-grow로 크기를 정하기 전에 요소의 기본 크기를 정해준다
#box1에는 10em, #bo2에는 20em을 줬다.
예)
#box1 {
display: flex;
flex-basis: 10em;
flex-grow: 1;
}
#box2 {
display: flex;
flex-basis: 20em;
flex-grow: 2;
}
flex, flex-grow flex-shrink flex-basis를 한번에 사용하자
사용법
display: flex;
flex: 1 0 10px;
풀어보면
flex-grow 1, flex-shrink 0, flex-basis 10px
order 요소의 우선순위를 정하다
기본적으로 요소의 우선순위는 같기때문에 먼저쓰면 앞에온다.
하지만 order를 사용면 순서를 바꿀 수 있다.
#box1이 먼저 만들어졌어도, #box2보다 뒤로간다.
#box1 {
order: 2;
}
#box2 {
order: 1;
}
align-self 개별 정렬
align-items와 달리 align-self는 개별정리를 해준다.
align-items와 같은 속성을 사용한다.
즉, flex-start, flex-end, center, stretch, baseline를 이용해서 정렬해준다
align-self: flex-end;