깜놀하는 해므찌로

Tailwind CSS 반응형 flex div 예시 본문

IT

Tailwind CSS 반응형 flex div 예시

agnusdei1207 2023. 5. 18. 16:29
반응형
SMALL
<div class="flex flex-col sm:flex-row"></div>

1. tailwind 는 모바일 우선 적용이므로 스크린이 640 이하라면 flex-col

2. 640 이상이라면 flexrow 가 적용됩니다.

 

 

<!-- form mobile -->
<divclass="sm:hidden"><div>
    
    
<!-- form tablet, pc -->
<divclass="hidden sm:flex or block"><div>

3. 조건을 사용해 하나만 보이도록 할 수 있습니다.

 

 

 

 

https://tailwindcss.com/docs/responsive-design

 

Responsive Design - Tailwind CSS

Using responsive utility variants to build adaptive user interfaces.

tailwindcss.com

sm, md 다양한 사이즈는 테일윈드 공식문서 참고

반응형
LIST

'IT' 카테고리의 다른 글

typescript 선택적 매개변수, typescript ?  (0) 2023.05.19
Angular formGroup patchValue getRawValue 사용 예시  (0) 2023.05.18
Tailwind Toast 토스트 효과  (0) 2023.05.18
Tailwind Aside bar 생성 / drawer  (0) 2023.05.18
Tailwind 로딩 화면 spinner  (0) 2023.05.18
'IT' Related Articles more