동일한 영역을 차지하는 tap 만들기(feat: flex:1)

트러블 슈팅/html, css

워딩이 2024. 6. 20. 11:03

아래사진과 같이 넓이 높이 모두 같은 크기의 tap을 제작할 때, flex: 1을 이용하게 된다. 이 flex 1을 이용하기 전에 flex의 속성에 대해서 알아보자.

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성인데, 이 속성에는 flex-grow, flex-shrink, flex-basis 등이 있다.

대부분 flex는 auto, intial, none, 양의 수를 사용합니다.

만약 넓이, 높이 모두 같읕 크기의 tap을 원할 때 felx:1을 설정해주면됩니다. flex:2를 설정해주면 flex:1설정해준 tag보다 더 큰 요소를 차지할 수 있습니다.

.부모클래스 {
				display: flex;
				div {
					flex: 1;
					text-align: center;
				}

참고