Display
순수 css
body {
display: flex;
}
tailwind - display
tailwind에서 display는 class에 display 값만 입력하면 적용이 된다.
<span class="inline">display: inline</span>
flex-basis
css 속성 중에서는 flex 아이템의 초기 크기를 설정하는 속성이 flex-basis이다. box-sizing을 따로 지정하지 않을 경우 사용된다.
/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;
tailwind - flex-basis
tailwind에서는 `basis-{size}`의 구조로 flex 아이템의 초기 크기를 설정할 수 있다.
<div class="basis-1/4">01</div>
마우스를 올렸을 경우의 초기 사이즈를 변경하고 싶은 경우에는 'hover:'를 붙여서 설정하면 된다.
<div class="basis-1/3 hover:basis-1/2"></div>
반응형 웹을 위하여 break point를 설정하고 싶은 경우에는 tawilind에서는 'Breakpoint prefix'를 붙이면 된다.
tailwind의 breakpoint prefix 리스트
| breakpoint prefix | 최소 넓이 | css 표시 |
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
<div class="basis-1/4 md:basis-1/3">01</div>그러므로 해당 예시의 경우에는 768px에는 초기 사이즈가 1/3 사이즈로 변경된다는 예시이다.
