<div id="readability-page-1" class="page"><div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://brunch.co.kr/@swimjiy/25&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;지난 포스트&quot;}],&quot;target&quot;:&quot;_blank&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;에서 flexbox 속성 중 부모 요소에 적용되는 속성들을 정리했다면, 이번 포스트에서는 자식 요소에 적용하는 속성에 대해 알아보겠습니다.&quot;}]}"><a target="_blank" href="https://brunch.co.kr/@swimjiy/25">지난 포스트</a>에서 flexbox 속성 중 부모 요소에 적용되는 속성들을 정리했다면, 이번 포스트에서는&nbsp;자식 요소에 적용하는 속성에 대해 알아보겠습니다.</p><h2 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;자식 요소 속성&quot;}],&quot;size&quot;:&quot;h2&quot;}">자식 요소 속성</h2><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;order&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b>order</b></h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#00c3bd&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;자식 요소 간 순서를 정의&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;하는 속성입니다. 기본값은 0이며 z-index와 동일하게 값이 작아질수록 최상단에 위치합니다.&quot;}]}"><b><span>자식 요소 간 순서를 정의</span></b>하는 속성입니다. 기본값은 0이며&nbsp;z-index와 동일하게 값이 작아질수록 최상단에 위치합니다.</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;li {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;     order: 0; /*default*/&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; }&quot;}]}">li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;order: 0; /*default*/<br>&nbsp;}</blockquote><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/5xeg/image/mgPginiGe_YfnhwdpViKedYWLfQ.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;748&quot;,&quot;height&quot;:&quot;178&quot;,&quot;originalName&quot;:&quot;1229_img10.jpg&quot;}"><p><img src="https://t1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/5xeg/image/mgPginiGe_YfnhwdpViKedYWLfQ.jpg" data-filename="1229_img10.jpg"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-grow&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b>flex-grow</b></h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;부모 요소에 여분의 공간이 있을 때, &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#00c3bd&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;자식 요소의 너비를 확장할 것인지 아닌지&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; 정의하는 속성입니다. 기본값인 0일 땐 너비를 확장하지 않으며, 0보다 큰 숫자를 입력할 경우 너비를 확장합니다. 또한 숫자가 크면 클수록 상대적으로 너비를 더 크게 가져갈 수 있습니다.&quot;}]}">부모 요소에 여분의 공간이 있을 때, <b><span>자식 요소의 너비를 확장할 것인지 아닌지</span></b>&nbsp;정의하는 속성입니다. 기본값인 0일 땐 너비를 확장하지 않으며, 0보다 큰 숫자를 입력할 경우 너비를 확장합니다. 또한 숫자가 크면 클수록 상대적으로 너비를 더 크게 가져갈 수 있습니다.</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;li {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;     flex-grow: 0/* default */ | 임의의 정수 값; &quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;}&quot;}]}">li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-grow: 0/* default */ | 임의의 정수 값; <br>}</blockquote><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/5xeg/image/kjEnSRNKwNdR-ORZFp2ODGLZy2k.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;716&quot;,&quot;height&quot;:&quot;261&quot;,&quot;originalName&quot;:&quot;1229_img11.jpg&quot;}"><p><img src="https://t1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/5xeg/image/kjEnSRNKwNdR-ORZFp2ODGLZy2k.jpg" data-filename="1229_img11.jpg"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-shrink&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b>flex-shrink</b></h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-grow속성과 반대로 부모 요소에 여분의 공간이 없을 때 &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#00c3bd&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;자식 요소의 너비를 축소&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;하는 속성이다. 기본값은 1이고, 0이면 줄어들지 않고 본인의 너비 값을 그대로 유지하며, 1보다 큰 숫자를 입력하면 숫자가 클수록 더 많이 축소합니다.&quot;}]}">flex-grow속성과 반대로 부모 요소에 여분의 공간이 없을 때 <b><span>자식 요소의 너비를 축소</span></b>하는 속성이다. 기본값은 1이고, 0이면 줄어들지 않고 본인의 너비 값을 그대로 유지하며, 1보다 큰 숫자를 입력하면 숫자가 클수록 더 많이 축소합니다.</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;li {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;     flex-shrink: 1 /* default */ | 임의의 정수 값;&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; }&quot;}]}">li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-shrink: 1 /* default */ | 임의의 정수 값;<br>&nbsp;}</blockquote><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/5xeg/image/huOoM-W1ixa0IyhbqSLaQegNxJI.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;726&quot;,&quot;height&quot;:&quot;374&quot;,&quot;originalName&quot;:&quot;1229_img12.jpg&quot;}"><p><img src="https://t1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/5xeg/image/huOoM-W1ixa0IyhbqSLaQegNxJI.jpg" data-filename="1229_img12.jpg"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-basis&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b>flex-basis</b></h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#00c3bd&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;자식 요소들의 기본 너비&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;를 정의합니다. 부모 요소의 크기에 따라 자동으로 변경되는 auto가 기본값이며 px, em, % 와 같은 임의값를 지정하면 해당 값만큼 요소들의 크기가 설정됩니다. &quot;}]}"><b><span>자식 요소들의 기본 너비</span></b>를 정의합니다. 부모 요소의 크기에 따라 자동으로 변경되는&nbsp;auto가 기본값이며 px, em, % 와 같은 임의값를 지정하면 해당 값만큼 요소들의 크기가 설정됩니다.&nbsp;</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;li {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;     flex-basis: auto /* default */ | px, em, %...;&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; }&quot;}]}">li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-basis: auto /* default */ | px, em, %...;<br>&nbsp;}</blockquote><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/5xeg/image/iKaeKs9s4Xrgb3B-qeE1cDi7eLg.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;727&quot;,&quot;height&quot;:&quot;167&quot;,&quot;originalName&quot;:&quot;1229_img13.jpg&quot;}"><p><img src="https://t1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/5xeg/image/iKaeKs9s4Xrgb3B-qeE1cDi7eLg.jpg" data-filename="1229_img13.jpg"><span></span></p></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b>flex</b></h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#00c3bd&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-grow와 flex-shrink, 그리고 flex-basis&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;의 값을 합친 약칭 속성입니다. 첫 번째 flex-grow를 제외한 나머지 속성은 생략이 가능합니다.  &quot;}]}"><b><span>flex-grow와 flex-shrink, 그리고 flex-basis</span></b>의 값을 합친 약칭 속성입니다. 첫 번째 flex-grow를 제외한 나머지 속성은 생략이 가능합니다.&nbsp;&nbsp;</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;li {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;     flex: 0 1 auto /* default */ | none &quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;}&quot;}]}">li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex: 0 1 auto /* default */ | none <br>}</blockquote><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;align-self&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}"><b>align-self</b></h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;부모 요소의 align-items 속성과는 무관하게 개별적으로 세로 정렬 값을 정의할 수 있습니다.&quot;}]}">부모 요소의&nbsp;align-items 속성과는 무관하게 개별적으로 세로 정렬 값을 정의할 수 있습니다.</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;box&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;li {&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;   align-items: auto | flex-start | flex-end | center | baseline | stretch; &quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;}&quot;}]}">li {<br>&nbsp;&nbsp;&nbsp;align-items: auto | flex-start | flex-end | center | baseline | stretch; <br>}</blockquote><p data-app="{&quot;type&quot;:&quot;bullet&quot;,&quot;kind&quot;:&quot;circle&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;auto (default) : 부모 요소의 속성에 따라 자동 정렬&quot;}]}">auto (default) : 부모 요소의 속성에 따라 자동 정렬</p><p data-app="{&quot;type&quot;:&quot;bullet&quot;,&quot;kind&quot;:&quot;circle&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-start : 시작점으로 정렬&quot;}]}">flex-start : 시작점으로 정렬</p><p data-app="{&quot;type&quot;:&quot;bullet&quot;,&quot;kind&quot;:&quot;circle&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;flex-end : 끝점으로 정렬&quot;}]}">flex-end : 끝점으로 정렬</p><p data-app="{&quot;type&quot;:&quot;bullet&quot;,&quot;kind&quot;:&quot;circle&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;center: 중앙 정렬&quot;}]}">center: 중앙 정렬</p><p data-app="{&quot;type&quot;:&quot;bullet&quot;,&quot;kind&quot;:&quot;circle&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;stretch : 부모 요소의 높이에 맞춰 늘어남 (단, 자식 요소의 높이값이 지정되지 않은 경우)&quot;}]}">stretch : 부모 요소의 높이에 맞춰 늘어남 (단, 자식 요소의 높이값이 지정되지 않은 경우)</p><p data-app="{&quot;type&quot;:&quot;bullet&quot;,&quot;kind&quot;:&quot;circle&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;baseline : 폰트의 기준선에 맞춰 정렬&quot;}]}">baseline : 폰트의 기준선에 맞춰 정렬</p><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/5xeg/image/_t6I4GIJGKEBNmn6OGP20M8pqDs.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;714&quot;,&quot;height&quot;:&quot;335&quot;,&quot;originalName&quot;:&quot;1229_img14.jpg&quot;}"><p><img src="https://t1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/5xeg/image/_t6I4GIJGKEBNmn6OGP20M8pqDs.jpg" data-filename="1229_img14.jpg"><span></span></p></div><h2 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;마무리&quot;}],&quot;size&quot;:&quot;h2&quot;}">마무리</h2><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;오늘까지 해서 css flexbox 모듈의 속성들을 알아봤습니다. 사실 실제 작업을 할 때는 일부 속성만 사용하게 되는지라 저도 이번 포스팅을 통해 한 번 더 개념을 잡고 갈 수 있었습니다.&quot;}]}">오늘까지 해서 css flexbox 모듈의 속성들을 알아봤습니다. 사실 실제 작업을 할 때는 일부 속성만 사용하게 되는지라 저도 이번 포스팅을 통해 한 번 더 개념을 잡고 갈 수 있었습니다.</p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그럼 오늘 포스팅은 여기서 마치겠습니다.&quot;}]}">그럼 오늘 포스팅은 여기서 마치겠습니다.</p><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;참고자료&quot;}],&quot;size&quot;:&quot;h3&quot;}">참고자료</h3><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#333333&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://www.w3schools.com/css/css3_flexbox.asp&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;CSS Flexbox (Flexible Box)&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}]}"><span><a target="_blank" href="https://www.w3schools.com/css/css3_flexbox.asp">CSS Flexbox (Flexible Box)</a></span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#333333&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://css-tricks.com/snippets/css/a-guide-to-flexbox/&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;A Complete Guide to Flexbox | CSS-Tricks  &quot;}],&quot;target&quot;:&quot;_blank&quot;}]}]}"><span><a target="_blank" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks &nbsp;</a></span></p></div></div>

swimjiy

지난 포스트에서 flexbox 속성 중 부모 요소에 적용되는 속성들을 정리했다면, 이번 포스트에서는 자식 요소에 적용하는 속성에 대해 알아보겠습니다.  자식 요소 속성 order 자식 요소 간 순서를 정의하는 속성입니다. 기본값은 0이며 z-index와 동일하게 값이 작아질수록 최상단에 위치합니다. li {     order: 0; /*default*/ }

CSS flexbox 톺아보기 - 2. 자식 요소 속성 - 효과적으로 레이아웃을 배치할 수 있는 flexbox 속성을 알아보자

댓글