기존 float와 inline-block가 가지는 레이아웃 설정에서의 한계점을 보완하는 Flexbox에 대해 공부해 보았다.
- flex container에 적용하는 속성
- flex container 의 자식요소인 flex item에 적용하는 속성
flexbox를 사용하려면 부모태그인 container를 설정하고 CSS로 flex를 설정한다.
//html
<div class="container">
<div class="item">
<div class="item">
<div class="item">
</div>
//css
.container {
display: flex;
}
flex 설정 후 width -> content의 크기만큼.
height-> 부모 컨테이너의 높이만큼 늘어남.
▶container에 적용하는 속성
- flex-direction : row(default) / row-reverse / column / column-reverse
reverse 속성은 역순으로 배치 된다.
- flex-wrap : nowrap(default) / wrap / wrap-reverse;
reverse 속성은 위로 wrap된다.
- flex-flow : flex-direction + flex-wrap의 단축 속성
ex) flex-flow : row wrap-reverse;
- justify-content : flex-start(default) / flex-end / center / space-between / space-around / space-evenly
item의 처음과 끝, 중앙, 여백을 다 사용해서 펼치고(sapce-between),
item의 좌, 우 양옆에 동일한 여백을 가지면서 펼치고(space-around),
item의 좌, 우 양옆의 여백을 동일하게 맞추면서 펼친다(space-evenly)
- align-items : stretch(default) / flex-start / flex-end / center / baseline
align은 수직축 정렬이다. 기본값은 부모 컨테이너의 높이만큼 펼치고,
baseline(text가 가지는 baseline)을 기준으로 정렬한다.
- algin-content : stretch(default) / flex-start / flex-end / center / space-between / space-around / space-evenly
수직축이 2줄 이상일 때 전부를 대상으로 정렬한다. justify-content와 속성은 같음.
* space-evenly는 IE,edge 브라우저에서는 지원하지 않는다.
▶item에 적용하는 속성
- flex-basis : auto(default) / % / px / rem / content
flex item의 기본 크기를 설정. (flex-direction:row 일때 = 너비, column일때 = 높이)
auto는 해당 flex item의 width크기를 사용. content는 해당 flex item의 컨텐츠 크기.
*flex item의 width가 100px이 안될 때, flex-basis: 100px를 주면
-> item의 width가 100px로 늘어남.
*flex item의 width가 100px이 넘을 때, flex-basis: 100px를 주면
-> item의 width는 넘는대로 기존 너비 유지.
*flex item에 width:100px를 주면
-> 컨텐츠 크기가 100px가 넘는 flex item은 text가 item을 삐져나감
-> word-wrap: break-word;를 주면 text가 wrap됨.
- flex-grow : 0 (default) / 0 이상 값
기본값 0이면 늘어나지 않는 고정 상태. 0 이상 값을 주면 브라우저 창 크기에 따라 여백을 메우면서 유연하게 늘어남.
*flex item 마다 flex-grow를 다른 비율로 주면
-> flex-basis(기본 크기)를 제외한 여백을 flex-grow 비율로 나눠 가짐.
- flex-shrink : 1 (default) / 0 이상 값
기본값 1은 창 크기를 줄이면 유연하게 줄어드는 상태. 0이면 크기가 고정된다.
*flex item에 flex-shrink : 0을 주고 width값을 주면
-> 고정된다. 그렇지 않은 flex item들은 유연하게 줄어든다.
*flex-grow, flex-shrink 둘다 flex-basis(기본 크기) 보다 작아지거나 커질 수 있는지 없는지를 설정한다.
- flex : flex-grow + flex-shrink + flex-basis 단축 속성.
*flex : 1
-> flex-grow: 1 , flex-shrink: 1, flex-basis: 0% (flex-basis가 생략되면 값이 auto가 아니라 0 이다.)
*flex : 1 1 auto;
*flex : 1 200px;
-> flex-grow: 1 , flex-shrink: 1, flex-basis: 200px;
* flex item의 공통 속성으로 flex: 1 1 0을 주고, 3개의 flex item중 하나에 flex: 2 1 0;을 주면
-> flex-basis(기본 크기)가 0이므로 그냥 전체 부모 컨테이너 크기를 flex-grow : 2를 준 flex item이
다른 flex item들 보다 2배의 너비를 가진다.
* flex : 1 1 40%;
-> 한 줄에 flex item이 2개만 들어가는 2단 column.
- align-self : auto(default) / stretch / flex-start / flex-end / center / baseline
flex-item의 개별 수직축 정렬이다. align-items가 한 줄에 대한 수직축 정렬이라면, align-self는 개별 flex item에 대한 수직축 정렬이다.
* 우선순위 : align-content(2줄 이상, 수직축정렬) > align-items,
align-items < align-self
- order : flex item들의 시각적인 정렬 순서를 정의한다. 같으면 순서대로, 음수도 가능.
* 시각적으로만 변하고 실제 HTML 문서상에서는 변하지 않으므로 시각 장애인들의 스크린리더 접근성에서는 위험하다.
- z-index : flex item의 z 축 정렬. 숫자가 클수록 위로 올라옴.
'FRONTEND > CSS' 카테고리의 다른 글
| [CSS] 레이아웃을 깨뜨리는 마진병합 현상 (0) | 2022.09.14 |
|---|