Flexbox
1. 컨테이너에 지정할 수 있는 속성들
display: flex;
display: inline-flex; flex이면서도 inline이고 싶을 때
flex-direction: row / column / row-reverse / column-reverse;
행 방향, 열 방향 정렬(중심 축을 정함)
flex-wrap: wrap, nowrap, wrap-reverse;
nowrap이면 넘치는거없이 container 크기 극도로 줄면 item 크기를 줄임
wrap이면 넘치는거 다음 줄로 개행
flex-flow: column nowrap;
shorthand임
justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly;
중심 축을 기준으로 정렬
align-items: center, baseline 등;
반대 축을 기준으로 아이템 전체를 하나의 뭉탱이로 보고 정렬
align-content: flex-start, flex-end, center, space-between, space-around, space-evenly;
반대 축을 기준으로 라인 간의, 즉 한 줄 한 줄 사이의 간격을 조정
브라우저 호환이 아직 덜 되는게 많으니 caniuse 항상 참고
2. 아이템에 지정할 수 있는 속성들
flex-grow: 1;
0이 디폴트, 만약 2이면, 다른 아이템과 비교했을 때, 부모 컨테이너가 늘어날 때 2배까지 늘어나도록 함
flex-shrink: 1;
0이 디폴트, 만약 2이면, 컨테이너가 점점 작아졌을 때, 다른 아이템과 비교했을 때 2배로 줄기
flex-basis: 60%;
기본값은 auto, auto일 때는 grow, shrink에서 설정한 대로 움직임. 그러나 이렇게 60%인 경우 컨테이너 너비에 대하여 grow도 60%, shrink도 60%로 줄어듦.
align-self: center;
컨테이너에 지정된 속성? 에서 벗어나서, 그 아이템 하나만 따로 원하는대로 특별하게 배치하는 것
<-webkit-box>
임의의 줄 수 이상으로 넘치는 문자들을 ...로 처리하기
•display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
3. flex-grow, flex-shrink, flex-basis 정리
flex-grow: 기본값 0
컨테이너 내의, item들을 제외한 여백을 얼마만큼의 비율을 떼가서 먹을 것인지를 정함.
만약 여백이 한 300px 정도 있다고 치자. flex-grow: 0.5; 이면 150px을 item의 너비에 더 함.
flex-shrink: 기본값 1
값이 0이거나 0보다 크거나로 둘 중 하나임
0보다 크면 flex-basis 보다 작아질 수 있다는 뜻이고, 0이면 flex-basis 이하로 작아질 수 없다는 뜻임
만약 shrink가 0여도 flex-basis가 0이면 0 이하로 작아지지 않는다는 소린데 그건 원래 당연한 거니까 이는 아이템이 자유자재로 수축할 수 있다는 뜻과 같아짐
flex-basis: 여러 단위
아이템의 기본 값을 의미함(width or height)
만약 flex-basis가 150px이고 content의 width가 100px이면 150px로 늘어나고, 아이템의 width가 200px로 설정돼있으면 200px이 됨. 즉 default값이라고 생각하면 편할 듯
sticky
position: sticky;
top, bottom, left, right 중 하나라도 0이든지 뭐든지 설정 해줘야 됨
button
display가 inline-block로 고정. 변경이 안됨.
<%>
<부모>
<자식1>
</자식1>
<자식2>
</자식2>
<부모/>
이 구조일 때, 만약 자식1의 높이가 40px이여서 부모도 40px이 되어있을 때, 자식2의 height를 100%로 하면 자식2도 40px이 되는게 아니라 0이 되거나 콘텐트의 높이에 맞춰짐. 부모의 실제 높이는 40px이 아니고 자식1에 의해 넓어진 것이기 때문.
벤더 프리픽스
https://projects.verou.me/prefixfree/
여기서 라이브러리 다운받고, include 해주기
<script src="prefixfree.min.js"></script>CSS 작성 규칙
전체 선택자, 어트리뷰트 선택자를 마지막에 단독으로 쓰는거 지양하기
어트리뷰트 조건부 선택자(~= etc.) 지양
태그 선택자 사용 최소화
charset에만 큰 따옴표, 나머지에는 작은 따옴표 사용
- 속성 우선 순위
display
list-style
position
float
clear
width / height
padding / margin
border / background
color / font
text-decoration
text-align / vertical-align
white-space
other text
content
요약 : 레이아웃 > 박스 > 배경 > 폰트 > 동작(animation 등) > 기타
이제 float, margin, inline-block으로 억지로 정렬하는 방법 안 배워도 되나?
Flexbox의 의미는 문서를 위한 CSS와 애플리케이션 레이아웃을 하기 위한 방식이 분리되어 CSS 스펙으로 웹 애플리케이션 레이아웃을 할 수 있는 토대를 만들어 준 것입니다.
2022년, Flexbox는 이제 모든 웹 레이아웃의 표준입니다. Float, Margin, Rable, Inline-block 등 옛날 방식으로 뭔가 정렬하는 방식들은 이제 배우지 않으셔도 되고 헷갈려하지 마시기 바라며 CSS를 한다면 Flexbox만큼은 꼭 Master가 되시길 바랍니다!
출처 : CSS가 어려워진 이유
