aboutsummaryrefslogtreecommitdiff
path: root/files/ko/glossary/flex_container
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
commitda78a9e329e272dedb2400b79a3bdeebff387d47 (patch)
treee6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/glossary/flex_container
parent1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff)
downloadtranslated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip
initial commit
Diffstat (limited to 'files/ko/glossary/flex_container')
-rw-r--r--files/ko/glossary/flex_container/index.html36
1 files changed, 36 insertions, 0 deletions
diff --git a/files/ko/glossary/flex_container/index.html b/files/ko/glossary/flex_container/index.html
new file mode 100644
index 0000000000..8d70d17c82
--- /dev/null
+++ b/files/ko/glossary/flex_container/index.html
@@ -0,0 +1,36 @@
+---
+title: 플렉스 컨테이너
+slug: Glossary/Flex_Container
+tags:
+ - CSS
+ - Glossary
+ - flexbox
+translation_of: Glossary/Flex_Container
+---
+<p>{{glossary("flexbox", "플렉스박스")}} 레이아웃은 부모 요소의 <code>display</code> 속성에 <code>flex</code> 또는 <code>inline-flex</code> 값을 지정해 정의합니다. 이 때, 부모 요소는 <strong>플렉스 컨테이너</strong>, 각각의 자식 요소를 {{glossary("flex item", "플렉스 항목")}}이 됩니다.</p>
+
+<p><code>flex</code> 값은 요소를 블록 레벨 플렉스 컨테이너로 지정하고, <code>inline-flex</code>는 인라인 레벨 플렉스 컨테이너로 지정합니다. 두 값은 요소에 새로운 <strong>플렉스 서식 맥락</strong>을 생성합니다. 플렉스 서식 맥락은 블록 서식 맥락과 유사하여 플로팅 요소가 컨테이너를 침범하지 않으며, 컨테이너의 바깥 여백이 자기 아래 플렉스 항목의 바깥 여백과 상쇄되지 않습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>