-
[display] flex VS gridHTML·Style/CSS 2023. 5. 19. 01:54
출처 : Forma 36 ✅ flex
- 1차원 레이아웃 : 한 번에 하나의 축(가로 또는 세로 방향)을 조작하여 유연하게 배치할 수 있다.
- 주 축을 따라 요소를 정렬하고, 요소의 크기를 자동으로 조절하고, 간격을 조정하기 쉽다.
- 단순한 구조와 정렬이 필요한 경우 적합하다.
- 참고)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
✅ grid
- 2차원 레이아웃 : 행과 열을 동시에 조작하여 다양한 레이아웃 패턴을 만들 수 있다.
- grid 내에서 요소의 위치와 크기를 세밀하게 제어할 수 있다.
- 반응형 디자인에 특히 유용하다.
- 참고)
https://www.w3schools.com/css/css_grid.asp
CSS Grid Layout
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML·Style > CSS' 카테고리의 다른 글
미디어쿼리를 최소화하여 반응형 작업하기 (0) 2023.05.22 animation 성능 개선 방법 (0) 2023.05.22 모바일 Safari 브라우저에서 크로스브라우징하기 (0) 2023.05.10 웹 폰트 최적화 기법 (0) 2023.05.10 [css] "text-indent: -9999px"보다 좋은 코드를 사용하자 (0) 2023.04.13