개발자
flex-grow 스타일이 제대로 먹지 않는 것 같은데 이유 아시는 분 계실까요?
2023년 04월 13일•조회 86
flex-grow를 쓰면 아이템이 화면에 꽉 차게 늘어나는 것으로 알고 있는데요. 아이템들의 사이즈가 동일하게 늘어나지 않는데 왜그런걸까요? 텍스트 길이에 따라 크기가 달라지는 것 같습니다.. 아이템의 개수가 2~3개로 가변적일 수 있어 컬럼을 쓰기엔 컬럼 개수를 지정해줄 수 없어 애매한 상황이에요.
1<div class=""flex-parent"">
2 <button class=""flex-child"">option 1</button>
3 <button class=""flex-child"">option 2</button>
4</div>
5
6.flex-parent {
7 display: flex;
8 flex-direction: row;
9}
10
11.flex-child {
12 flex-grow: 1;
13}이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이
더 많은 사람에게 노출될 수 있어요.
'보충이 필요해요' 버튼을 누르면 질문자에게
질문 내용 보충을 요청하는 알림이 가요.
익명님의 질문
답변 1
문제는 ' flex-grow '가 제대로 작동하고 있지만, 버튼의 텍스트 길이에 따라 버튼의 최소 너비가 달라져서 원하는 결과를 얻지 못하고 있습니다. 이를 해결하려면 ' flex-child ' 클래스에 ' flex-basis ' 속성을 ' 0 '으로 설정해야 합니다. 아래와 같이 스타일을 수정하세요: ' flex-basis: 0; '을 추가하면, 모든 자식 요소가 동일한 공간을 차지하게 됩니다. 이렇게 하면 텍스트 길이에 상관없이 모든 버튼의 너비가 균일하게 늘어납니다.
1.flex-child {
2 flex-grow: 1;
3 flex-basis: 0;
4}커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!