<div id="parent">
<div class=child-auto>넓은텍스트자리를차지</div>
<div class=child-auto>좁은텍스트</div>
<div class=child-auto>더좁은</div>
</div>
</br>
<div id="parent">
<div class=child-0>넓은텍스트자리를차지</div>
<div class=child-0>좁은텍스트</div>
<div class=child-0>더좁은</div>
</div>
#parent {
border: black solid 2px;
display: flex;
width:500px;
}
.child-auto {
border: red dotted 2px;
margin: 5px;
flex-grow: 1;
flex-basis: auto; /* 0과 auto 비교해보기 */
}
.child-0 {
border: red dotted 2px;
margin: 5px;
flex-grow: 1;
flex-basis: 0; /* 0과 auto 비교해보기 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.