<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">앞에서도 여러번 나왔었는데도 잘 이해가 가질 않습니다.</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">.sec5_list {display:flex;margin:0 -30px}</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">을 주셨는데 maring:0 -30px;을 주는 이유에 대해 잘 모르겠습니다.</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">조금 더 자세히 설명해주시면 감사하겠습니다.</div>

<p>네 그 이유는 전체 박스에서 -30만큼을 빼주고 안에 있는 자식 오소에서는 margin-left를 30을 주게되면&nbsp;<br />전체적으로 보면 가운데 정렬이 되는거예요.&nbsp;<br />다른 방법으로 보자면 ul은&nbsp;</p>
<ol class="tree-outline" style="box-sizing: border-box; min-width: 0px; min-height: 0px; padding: 0px; margin: 0px; z-index: 0; position: relative; list-style-type: none; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; white-space: nowrap;" role="tree">
<li style="box-sizing: border-box; min-width: 0px; min-height: 14px; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><span class="webkit-css-property" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: #c80000; margin-left: -38px;">display</span><span class="styles-name-value-separator" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 14px; text-decoration: inherit; white-space: pre;">: </span><span class="value" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">flex</span>;</li>
<li style="box-sizing: border-box; min-width: 0px; min-height: 14px; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><span class="styles-clipboard-only" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 0px; opacity: 0; pointer-events: none; white-space: pre;"> </span><span class="webkit-css-property" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: #c80000; margin-left: -38px; text-decoration-line: underline; cursor: default;">flex-wrap</span><span class="styles-name-value-separator" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 14px; text-decoration: inherit; white-space: pre;">: </span><span class="value" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">wrap</span>;</li>
<li style="box-sizing: border-box; min-width: 0px; min-height: 14px; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><span class="styles-clipboard-only" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 0px; opacity: 0; pointer-events: none; white-space: pre;"> </span><span class="webkit-css-property" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: #c80000; margin-left: -38px;">justify-content</span><span class="styles-name-value-separator" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 14px; text-decoration: inherit; white-space: pre;">: </span><span class="value" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">center</span></li>
</ol>
<p>&nbsp;</p>
<p><span class="value" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">이렇게 하구요.<br />li한테</span></p>
<div class="styles-section-title styles-selector" style="box-sizing: border-box; min-width: 0px; min-height: 0px; overflow-wrap: break-word; cursor: text; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px;">
<div style="box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="selector" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--color-text-disabled);">.sec03_list li</span><span class="sidebar-pane-open-brace" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--color-text-primary);"> + li{</span></div>
</div>
<div class="style-properties matched-styles monospace styles-panel-hovered" style="flex: 1 1 auto; padding: 2px 4px 0px 0px; --monospace-font-size: 12px; --monospace-font-family: consolas, lucida console, courier new, monospace; --source-code-font-size: 12px; --source-code-font-family: consolas, lucida console, courier new, monospace; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; margin: 0px; list-style: none; clear: both; display: flex; color: #202124; white-space: nowrap;">
<div class="tree-outline-disclosure" style="box-sizing: border-box; min-width: 100%; min-height: 0px; display: inline-block;">
<ol class="tree-outline" style="box-sizing: border-box; min-width: 0px; min-height: 0px; padding: 0px; margin: 0px; z-index: 0; position: relative; list-style-type: none;" role="tree">
<li style="box-sizing: border-box; min-width: 0px; min-height: 14px; text-overflow: ellipsis; white-space: normal; position: relative; display: block; align-items: center; margin-left: 0px !important; padding-left: 38px; cursor: auto; clear: both;" role="treeitem"><span class="styles-clipboard-only" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 0px; opacity: 0; pointer-events: none; white-space: pre;"> </span><span class="webkit-css-property" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: #c80000; margin-left: -38px;">margin-left</span><span class="styles-name-value-separator" style="box-sizing: border-box; min-width: 0px; min-height: 0px; display: inline-block; width: 14px; text-decoration: inherit; white-space: pre;">: </span><span class="value" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">33px</span>;</li>
</ol>
</div>
</div>
<p>&nbsp;</p>
<div class="sidebar-pane-closing-brace" style="box-sizing: border-box; min-width: 0px; min-height: 0px; clear: both; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; white-space: nowrap;">}</div>
<div class="sidebar-pane-closing-brace" style="box-sizing: border-box; min-width: 0px; min-height: 0px; clear: both; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; white-space: nowrap;">&nbsp;</div>
<div class="sidebar-pane-closing-brace" style="box-sizing: border-box; min-width: 0px; min-height: 0px; clear: both; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; white-space: nowrap;"><span style="color: #000000; font-family: 'Spoqa Han Sans'; font-size: medium; white-space: normal;">이렇게 하는것도 동일한 결과가 나옵니다. li 다음에 나오는 li는 첫번째 li를 제외한 2번부터 5번까지의 li이니까<br /></span></div>
<div class="sidebar-pane-closing-brace" style="box-sizing: border-box; min-width: 0px; min-height: 0px; clear: both; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; white-space: nowrap;"><span style="color: #000000; font-family: 'Spoqa Han Sans'; font-size: medium; white-space: normal;">margin을 왼쪽으로 주게되면 동일한 결과가 나옵니다.</span></div>
<div class="sidebar-pane-closing-brace" style="box-sizing: border-box; min-width: 0px; min-height: 0px; clear: both; color: #202124; font-family: consolas, 'lucida console', 'courier new', monospace; font-size: 12px; white-space: nowrap;"><span style="color: #000000; font-family: 'Spoqa Han Sans'; font-size: medium; white-space: normal;"> 방법의 차이라고 생각하시면 될듯합니다.</span></div>

인프런 커뮤니티 질문&답변

display:flex를 이용해서 list를 정렬할때....