initial commit

4 files changed, 696 insertions, 0 deletions

diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..677cf2fdaf
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,211 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다)  내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.</p>
+
+<p>박스 내부를 중앙 정렬 하기 위해 박스에 <code>align-items</code> 속성을 지정하면 교차 축에 대해 flex 항목을 정렬할 수 있습니다. 아래 경우, 교차 축은 수직 축입니다. <code>justify-content</code> 속성을 지정하면 flex 항목을 주축에 대해 정렬 할 수 있습니다. 아래 경우, 주축은 수평 방향입니다.</p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+
+
+<p>아래 예제의 코드를 살펴보세요. flex 컨테이너(역주: .box로 지정된 div 태그)나 flex 항목(역주:  .box div로 지정된 div 태그)의 크기를 조절해도 flex 컨테이너 내부는 중앙 정렬됨을 보실 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="정렬_제어용_속성_목록">정렬 제어용 속성 목록</h2>
+
+<p>이 글에서 살펴볼 속성들은 다음과 같습니다.</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.</li>
+ <li>{{cssxref("align-items")}} — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.</li>
+ <li>{{cssxref("align-self")}} — 개별 flex 항목을 교차 축에 대해 정렬 하는 방식을 제어. flex 항목에 지정하는 속성.</li>
+ <li>{{cssxref("align-content")}} — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.</li>
+</ul>
+
+<p>또한, 이글에서 flexbox기반 정렬에서 margin 속성 값이 어떨게 쓰이는지 살펴볼 것입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The alignment properties in Flexbox have been placed into their own specification — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.</p>
+</div>
+
+<h2 id="교차축">교차축</h2>
+
+<p><code>align-items</code>와 <code>align-self</code> 속성들은 flex 항목들을 교차축으로 정렬하는 것을 제어합니다. 만약, <code>flex-direction</code>이 <code>row</code>로 설정되어있다면 열 (column) 아래로 정렬을 하게되고, <code>flex-direction</code>이 <code>column</code>으로 설정되어있다면 행 (row)을 따라 정렬됩니다. </p>
+
+<p>가장 간단한 flex예시는 교차축을 이용합니다. <code>display: flex</code>를 컨테이너에 추가하게되면, 모든 자식 항목들이 열 (row), 즉 가로 방향으로 정렬이 되는 flex 항목이 됩니다. 이 경우 가장 큰 y축의 크기, 즉 높이가 가장 큰 자식 항목이 교차축의 높이를 정의하게 되고, 나머지 자식 항목들은 이 높이에 맞추어 높이가 늘어나게 됩니다. 만약 flex 컨테이너의 높이가 지정이 되어있다면, 자식 항목 내용에 상관없이 지정된 높이 만큼 모든 자식 항목들이 늘어나게됩니다. </p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>모든 항목들이 같은 높이를 갖게되는 이유는 교차축을 중심으로 정렬을 제어하는 속성인 <code>align-items</code>에 지정된 초기값이 <code>stretch</code>로 설정이 되어있기 때문입니다. </p>
+
+<p>이외에도 다른 값을 지정해서 항목들이 정렬되는 방식을 다르게 정의 할 수 있습니다:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>아래의 예시를 보면, <code>align-items</code>값이 <code>stretch</code>로 지정이 되어있습니다. 여기에 다른 값들을 넣어서 항목들이 flex 컨테이너 안에서 어떻게 정렬이 되는지 확인해보세요.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="align-self로_항목_한_개를_정렬하기"><code>align-self</code>로 항목 한 개를 정렬하기</h3>
+
+<p>The <code>align-items</code> property sets the <code>align-self</code> property on all of the flex items as a group. This means you can explicitly declare the <code>align-self</code> property to target a single item. The <code>align-self</code> property accepts all of the same values as <code>align-items</code> plus a value of <code>auto</code>, which will reset the value to that which is defined on the flex container.</p>
+
+<p>In this next live example, the flex container has <code>align-items: flex-start</code>, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a <code>first-child</code> selector and set that item to <code>align-items: stretch</code>; another item has been selected using its class of <code>selected</code> and given <code>align-self: </code><code>center</code>. You can change the value of <code>align-items</code> or change the values of <code>align-self</code> on the individual items to see how this works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Changing_the_main_axis">Changing the main axis</h3>
+
+<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2>
+
+<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p>
+
+<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p>
+
+<p>The <code>align-content</code> property takes the following values:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p>
+
+<p>Try out the other values to see how the <code>align-content</code> property works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p>
+</div>
+
+<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p>
+
+<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2>
+
+<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p>
+
+<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3>
+
+<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2>
+
+<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p>
+
+<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2>
+
+<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p>
+
+<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p>
+
+<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2>
+
+<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p>
+
+<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p>
+
+<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li>
+</ul>
diff --git a/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html b/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html
new file mode 100644
index 0000000000..1966114608
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html
@@ -0,0 +1,236 @@
+---
+title: flexbox의 기본 개념
+slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.</p>
+
+<p>flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a>의 2차원 모델과는 대조됩니다.</p>
+
+<h2 id="flexbox의_두_개의_축">flexbox의 두 개의 축</h2>
+
+<p>flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 합니다. 주축은 {{cssxref("flex-direction")}} 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정됩니다. flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원되기 때문에 이들이 어떻게 동작하는지 처음부터 이해하는 것이 중요합니다.</p>
+
+<h3 id="주축">주축</h3>
+
+<p>주축은 <code>flex-direction</code>에 의해 정의되며 4개의 값을 가질 수 있습니다:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p><code>row</code> 혹은 <code>row-reverse</code>를 선택하면 주축은 <strong>인라인 방향</strong>으로 행을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><code>column</code> 혹은 <code>column-reverse</code> 을 선택하면 주축은 페이지 상단에서 하단으로 <strong>블록 방향</strong>을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="교차축">교차축</h3>
+
+<p>교차축은 주축에 수직하므로, 만약 <code>flex-direction</code>(주축)이 <code>row</code> 나 <code>row-reverse</code> 라면 교차축은 열 방향을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>주축이 <code>column</code> 혹은 <code>column-reverse</code> 라면 교차축은 행 방향을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>flex 요소를 정렬하고 끝을 맞추(justify)려면 어느 축이 어느 방향인지 이해하는 것이 중요합니다; flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.</p>
+
+<h2 id="시작선과_끝선">시작선과 끝선</h2>
+
+<p>flexbox가 쓰기 방법(writing mode)을 가정하지 않는다는 것은 상당히 중요합니다. 과거의 CSS는 왼쪽에서 오른쪽으로 향하는 가로 방향의 쓰기 방법에 치우쳐 있었습니다. 하지만 현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다. 새 라인이 항상 아래에 쌓인다고 가정하지도 않습니다.</p>
+
+<p>다른 글에서 flexbox와 쓰기 방법 명세(writing mode spec.)가 어떤 관련이 있는지 알아볼 수 있습니다. 그 전에, 이 글에서 flex 요소의 정렬 방향에 "왼쪽, 오른쪽, 위, 아래"를  사용하지 않는 이유를 알 수 있었으면 합니다.</p>
+
+<p><code>flex-direction</code>이 <code>row</code>고 영어 문장을 문서에 쓰고 있다면, 주축의 시작선은 왼쪽 끝, 끝선은 오른쪽 끝이 될 것입니다.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>아랍어 문장을 쓰고 있다면, 주축의 시작선은 오른쪽 끝, 끝 선은 왼쪽 끝이 될 것입니다.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>영어와 아랍어는 모두 가로 쓰기를 채택하고 있으므로 두 예시에서 교차축의 시작선은 <strong>flex 컨테이너</strong>의 위 끝이며 끝선은 아래 끝입니다.</p>
+
+<p>조금만 지나면 왼쪽-오른쪽으로 생각하는 것보다 시작선-끝선으로 생각하는 것이 금새 자연스러워질 것입니다. 동일한 패턴을 따르는 CSS 그리드 레이아웃 같은 방법을 다룰 때도 쉽게 적응할 수 있을 것입니다.</p>
+
+<h2 id="flex_컨테이너">flex 컨테이너</h2>
+
+<p>문서의 영역 중에서 flexbox가 놓여있는 영역을 <strong>flex 컨테이너</strong>라고 부릅니다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 {{cssxref("display")}} 값을 <code>flex</code> 혹은 <code>inline-flex</code>로 지정합니다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 <strong>flex 항목</strong>이 됩니다. display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.</p>
+
+<ul>
+ <li>항목은 행으로 나열됩니다. (<code>flex-direction</code> 속성의 기본값은 <code>row</code>입니다).</li>
+ <li>항목은 주축의 시작 선에서 시작합니다.</li>
+ <li>항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.</li>
+ <li>항목은 교차축의 크기를 채우기 위해 늘어납니다.</li>
+ <li>{{cssxref("flex-basis")}} 속성은 <code>auto</code>로 지정됩니다.</li>
+ <li>{{cssxref("flex-wrap")}} 속성은 <code>nowrap</code>으로 지정됩니다.</li>
+</ul>
+
+<p>이렇게되면 <strong>flex 항목</strong>들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.</p>
+
+<p>다음의 라이브 예시를 통해 어떻게 보여지는지 확인할 수 있습니다. flexbox의 초기 동작을 시험해보려면 항목을 추가하거나 수정해보시기 바랍니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="flex-direction_지정">flex-direction 지정</h3>
+
+<p><strong>flex 컨테이너</strong>에 {{cssxref("flex-direction")}} 속성을 지정하면 flex 항목이 나열되는 방향을 변경할 수 있습니다. <code>flex-direction: row-reverse</code> 라고 지정하면 행으로 나열되는 것은 그대로지만 시작 선과 끝 선이 서로 바뀌게 됩니다.</p>
+
+<p><code>flex-direction</code>을 <code>column</code>으로 지정하면 주축이 변경되고 항목들은 열로 나열됩니다. <code>column-reverse</code>로 지정하면 그에 더해 시작 선과 끝 선이 서로 바뀌게 됩니다.</p>
+
+<p>다음의 라이브 예시는 <code>flex-direction</code>이 <code>row-reverse</code>로 지정되어 있습니다. <code>row</code>, <code>column</code>, <code>column-reverse</code>와 같은 값을 지정해서 어떻게 되는지 확인해보시기 바랍니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="flex-wrap을_이용한_복수_행_flex_컨테이너_지정">flex-wrap을 이용한 복수 행 flex 컨테이너 지정</h2>
+
+<p>flexbox는 1차원 모델이지만 <strong>flex 항목</strong>이 여러 행에 나열되도록 할 수 있습니다. 그 경우 각 행이 새로운 <strong>flex 컨테이너</strong>라고 생각해야 합니다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않습니다.</p>
+
+<p>항목이 여러 행에 나열되도록 하려면 {{cssxref("flex-wrap")}} 속성의 값을 <code>wrap</code>으로 지정합니다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치됩니다. 아래의 라이브 예시에 있는 <strong>flex 항목</strong>은 폭이 지정되어 있으며 항목들의 폭의 합은 <strong>flex 컨테이너</strong>에 들어가기에는 너무 넓습니다. <code>flex-wrap</code>속성이 <code>wrap</code>으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 <code>nowrap</code>을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 <strong>flex 항목</strong>들은 컨테이너의 폭에 맞게 줄어듭니다.  <code>nowrap</code>을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a> 가이드에서 더 자세한 내용을 확인할 수 있습니다.</p>
+
+<h2 id="축약형_속성_flex-flow">축약형 속성 flex-flow</h2>
+
+<p><code>flex-direction</code> 속성과 <code>flex-wrap</code> 속성을 {{cssxref("flex-flow")}}라는 축약 속성으로 합칠 수 있습니다. 첫 번째 값은 <code>flex-direction</code>이고 두 번째 값은 <code>flex-wrap</code>입니다.</p>
+
+<p>다음의 라이브 예시에서 첫 번째 값을 <code>flex-direction</code>에 지정 가능한 값들(<code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>)로 바꿔보시기 바랍니다. 두 번째 값도 <code>wrap</code>이나 <code>nowrap</code>으로 바꿔보시기 바랍니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="flex_항목에_지정_가능한_속성들">flex 항목에 지정 가능한 속성들</h2>
+
+<p><strong>flex 항목</strong>에 적용할 수 있는 속성은 다음과 같습니다.</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>이 글에서는 위의 속성들에 대해 간략하게 살펴보겠습니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>에서 다룹니다.</p>
+
+<p>500 픽셀의 크기를 갖는 <strong>flex 컨테이너</strong> 내에 100 픽셀 크기의 자식 세 개가 존재할 때, <strong>사용가능한 공간 </strong>200 픽셀이 남게 됩니다. 기본적으로 flexbox는 이 공간을 마지막 자식 요소 다음에 빈공간으로 남겨둡니다.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>위의 세 가지 속성을 변경한다는 것은 <strong>flex 항목</strong>에게 <strong>사용가능한 공간</strong>을 분배하는 방식을 변경하는 것입니다. <strong>사용가능한 공간 </strong>개념은 <strong>flex 항목</strong>을 정렬할 때 특히 중요합니다.</p>
+
+<h3 id="flex-basis_속성"><code>flex-basis</code> 속성</h3>
+
+<p><code>flex-basis</code> 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 <code>auto</code>이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다. 위의 사진 예시의 경우 항목의 크기가 100 픽셀이므로 flex-basis의 값으로 100 픽셀이 사용됩니다.</p>
+
+<p><strong>flex 항목</strong>에 크기가 지정되어 있지 않으면, <strong>flex 항목</strong>의 내용물 크기가 flex-basis 값으로 사용됩니다. 따라서 <strong>flex 컨테이너</strong>에서 <code>display: flex</code> 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지하게 됩니다.</p>
+
+<h3 id="flex-grow_속성"><code>flex-grow</code> 속성</h3>
+
+<p><code>flex-grow</code>값을 양수로 지정하면<strong> flex 항목</strong>별로 주축 방향 크기가 <code>flex-basis</code> 값 이상으로 늘어날 수 있게 됩니다. 위의 사진 예시에서 모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.</p>
+
+<p>첫 항목의 <code>flex-grow</code> 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 <code>flex-grow</code> 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 <code>flex-grow</code> 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.</p>
+
+<h3 id="flex-shrink_속성"><code>flex-shrink</code> 속성</h3>
+
+<p><code>flex-grow</code> 속성이 주축에서 남는 공간을 항목들에게 분배하는 방법을 결정한다면 <code>flex-shrink</code> 속성은 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다. 만약 <strong>flex 컨테이너</strong>가 <strong>flex 항목</strong>을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 <code>flex-shrink</code> 값이 양수이면 <strong>flex 항목</strong>은 flex-basis에 지정된 크기보다 작아집니다. 또한, <code>flex-grow</code> 속성과 마찬가지로 더 큰 <code>flex-shrink</code> 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.</p>
+
+<p>항목의 최소 크기는 실제 축소량을 계산할 때 고려되기 때문에 flex-shrink 속성이 flex-grow 속성에 비해 덜 일관된 모습을 보여줄지도 모릅니다. <code>flex-shrink</code> 속성이 항목의 사이즈를 결정하는 알고리즘에 관해서는 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>에서 자세히 살펴히보겠습니다.</p>
+
+<div class="note">
+<p><code>flex-grow</code> 와 <code>flex-shrink</code>의 값이 비율임을 유의하세요.  <strong>flex 항목</strong>의 flex 속성을 모두 <code>1 1 200px</code> 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 <strong>flex 항목</strong>의 flex 속성을 <code>2 1 200px</code>로 지정하면 되지만, flex 속성 값을 모두  <code>10 1 200px</code>로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 <code>20 1 200px</code>로 지정해도 동일하게 동작합니다.</p>
+</div>
+
+<h3 id="축약형_속성_flex">축약형 속성 flex</h3>
+
+<p>보통은 <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>  값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 {{cssxref("flex")}} 축약형을 많이 사용합니다. <code>flex</code> 축약형의 값은 <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 순서로 지정됩니다.</p>
+
+<p>다음의 라이브 예시에서 flex 축약형의 값들을 조절하면서 시험해 볼 수 있습니다. 첫 값이 <code>flex-grow</code>를 지정하며,  이 첫 값을 양수로 하면 <strong>flex 항목</strong>이 넓어질 수 있습니다. 두 번째 값은 <code>flex-shrink</code> 를 지정하며 이 두 번째 값에 양수를 지정하면 <strong>flex 항목</strong>이 좁아질 수 있습니다. 세 번째 값은 <code>flex-basis</code>를 지정하며 이 값은 <strong>flex 항목</strong>이 넓어지거나 좁아질 때 고려하는 기준 값입니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들이 아래에 나열되어 있습니다. 이 값들 만으로도 대부분의 경우(use-case)에 대응할 수 있을 것 입니다.</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p><strong>flex 항목</strong>을 <code>flex: initial</code>로 지정하면  <code>flex: 0 1 auto</code> 로 지정한 것과 동일하게 동작합니다. 이 경우, <strong>flex 항목</strong>들은  <code>flex-grow</code>가 0이므로  <code>flex-basis</code>값보다 커지지 않고  <code>flex-shrink</code>가 1이므로 <strong>flex 컨테이너</strong> 공간이 모자라면 크기가 줄어듭니다. 또, <code>flex-basis</code>가 <code>auto</code>이므로 <strong>flex 항목</strong>은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.</p>
+
+<p><code>flex: auto</code> 로 지정하면 <code>flex: 1 1 auto</code>로 지정한 것과 동일하며, <code>flex:initial</code> 과는 주축 방향 여유 공간이 있을 때 <strong>flex 항목</strong>들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다.</p>
+
+<p><code>flex: none</code>으로 지정하면 <code>flex: 0 0 auto</code>으로 지정한 것과 동일하며 <strong>flex 컨테이너</strong>의 크기 변화에도<strong> flex 항목</strong> 크기는 변하지 않고 <code>flex-basis</code>를 <code>auto</code>로 지정했을 때 정해지는 크기로 결정됩니다.  </p>
+
+<p>이 축약형은 더 축약해서 <code>flex: 1</code> 이나 <code>flex: 2</code>처럼 쓸수도 있는데, 이는 <code>flex-grow</code> 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 <code>flex: 2</code>는 <code>flex: 2 1 0</code>와 동일하게 처리됩니다.</p>
+
+<p>다음 라이브 예제에서 이 축약 값들을 시험해 볼 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="정렬_끝_맞추기(justification)_flex_항목간_여유_공간_분배">정렬, 끝 맞추기(justification), flex 항목간 여유 공간 분배</h2>
+
+<p>flexbox의 주 기능 중 하나는 (주축과 교차축으로 표현되는) <strong>flex 컨테이너</strong> 공간 안에 <strong>flex 항목</strong>들을 정렬하고 끝 마추며 여유 공간을 항목 간에 분배하는 것입니다. </p>
+
+<p>역주) 이 절의 내용은 편의상 <strong>flex 컨테이너</strong>의 flex-direction를 row로 가정하고 '행'과 '열'로 표기했습니다.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>{{cssxref("align-items")}}는 <strong>flex 컨테이너</strong>에 지정하는 속성이며, 교차축을 따라 <strong>flex 항목</strong> 열을 정렬하는 방식을 지정합니다. </p>
+
+<p>이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 <code>stretch</code>이며 이 값을 지정하면 <strong>flex 항목</strong>의 높이는 <strong>flex 컨테이너</strong> 내 <strong>flex 항목</strong> 행의 최대 높이로 지정됩니다. 따라서, <strong>flex 항목</strong> 행이 하나 일 때는 <strong>flex 항목</strong>은 교차축 방향으로 <strong>flex 컨테이너</strong>를 가득 채우게 됩니다.</p>
+
+<p>이 속성을 <code>flex-start</code>로 지정하면<strong> flex 항목</strong>의 첫 열이 교차축 방향의 시작선에 정렬됩니다. <code>flex-end</code>로 지정하면 <strong>flex 항목</strong>의 첫 열이 교차축 방향의 끝선에 정렬됩니다. <code>center</code>로 지정하면 <strong>flex 항목</strong> 행에 배분된 공간의 가운데 라인에 정렬됩니다.</p>
+
+<p>다음 라이브 예제에서 이 값들을 시험해 볼 수 있습니다. - 이 시험을 위해 의도적으로 <strong>flex 컨테이너</strong>에 높이를 지정해 두었습니다.</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>{{cssxref("justify-content")}} 속성은 주축을 따라 <strong>flex 항목</strong> 행을 정렬하는 방식을 지정합니다.</p>
+
+<p>이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 <code>flex-start</code>이며 이 값을 지정하면 <strong>flex 항목</strong> 행 내의 항목들은 <strong>flex 컨테이너</strong>의 시작선에서 부터 정렬됩니다. <code>flex-end</code>로 지정하면 <strong>flex 항목</strong> 행의 마지막 항목이 <strong>flex 컨테이너</strong>의 끝선에서 정렬됩니다. <code>center</code>로 지정하면 <strong>flex 항목</strong>들이 <strong>flex 항목</strong> 행의 가운데 정렬됩니다.</p>
+
+<p><code>space-between</code>을 지정하면 주죽 방향 여유 공간을 <strong>flex 항목</strong> 사이의 공간에 균등 배분합니다. </p>
+
+<p><code>space-around</code>는 시작선 및 끝선과<strong> flex 항목</strong>간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 <strong>flex 항목</strong> 간의 공간의 크기를 1로 배분한다면 <strong>flex 항목</strong> 사이의 공간은 2로 배분합니다. </p>
+
+<p><code>space-evenly</code>로 지정하면 여유 공간을 <strong>flex 항목</strong> 사이의 공간 및 시작선 및 끝선과 <strong>flex 항목</strong> 간의 공간에 모두 균등하게 배분합니다.</p>
+
+<p>다음 라이브 예제에서 <code>justify-content</code>에 지정할 수 있는 다음 값들을 시험해 볼 수 있습니다.</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>이 절에서 설명한 내용으로 대부분의 경우에 대응할 수 있지만,  <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> 에서 이 속성들을 더 자세히 살펴볼 것입니다.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Flexbox의 개요를 살펴보았습니다. 다음 글 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>에서 이 규격이 다른 CSS 규격과 어떻게 연관되어 있는지 말씀드리겠습니다.</p>
diff --git a/files/ko/web/css/css_flexible_box_layout/index.html b/files/ko/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..d098a530b4
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,108 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS Flexible Box Layout</strong>은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 <a href="/ko/docs/Web/CSS">CSS</a> 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.</p>
+
+<h2 id="기본_예제">기본 예제</h2>
+
+<p>다음 예제의 컨테이너는 <code>display: flex</code>를 적용한 상태입니다. 따라서 컨테이너의 세 자식은 플렉스 항목이 됩니다. <code>justify-content</code>의 값은 <code>space-between</code>으로, 각 아이템을 주축(가로축)에 균일한 간격으로 배치합니다. 그래서 같은 양의 공간이 자식 사이에 균일하게 생기며 왼쪽과 오른쪽 아이템이 플렉스 컨테이너의 양 모서리에 붙어서 배치됩니다. 또한 <code>align-items</code>의 기본값인 <code>stretch</code>로 인해, 각 항목의 높이가 플렉스 컨테이너의 높이까지 늘어나서 세 자식 모두 제일 높이가 큰 항목과 같은 높이가 되는 것도 확인할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="CSS_속성">CSS 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="정렬_속성">정렬 속성</h3>
+
+<p><code>align-content</code>, <code>align-self</code>, <code>align-items</code>, <code>justify-content</code> 속성은 플렉스박스 명세에서 처음 나왔지만, 지금은 박스 정렬 명세가 정의하며 플렉스박스 명세는 박스 정렬 명세를 참조하고 있습니다. 추가 정렬 속성도 박스 정렬 명세가 가지고 있습니다.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="용어">용어</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Flexbox", "플렉스박스")}}</li>
+ <li>{{Glossary("Flex Container", "플렉스 컨테이너")}}</li>
+ <li>{{Glossary("Flex Item", "플렉스 항목")}}</li>
+ <li>{{Glossary("Main Axis", "주축")}}</li>
+ <li>{{Glossary("Cross Axis", "교차축")}}</li>
+ <li>{{Glossary("Flex", "플렉스")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90">플렉스박스의 기본 개념</a></dt>
+ <dd>플렉스박스의 기능 개요입니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">다른 레이아웃과 플렉스박스의 관계</a></dt>
+ <dd>플렉스박스와 다른 레이아웃 방법, 그리고 다른 CSS 명세가 가진 관계를 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">플렉스 컨테이너의 아이템 정렬하기</a></dt>
+ <dd>박스 정렬 속성이 플렉스박스에서 동작하는 방식을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">플렉스 아이템 배치하기</a></dt>
+ <dd>아이템의 순서와 방향을 바꾸는 여러 방법과, 이 때 발생할 수 있는 여러 문제를 다룹니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">플렉스 아이템의 주요 축 비율 조절하기</a></dt>
+ <dd><code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 속성을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">플렉스 아이템 줄바꿈 마스터하기</a></dt>
+ <dd>여러 줄로 이뤄진 플렉스 컨테이너를 만드는 방법과, 컨테이너 아이템의 표시 방법 설정을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">플렉스박스의 일반적인 용례</a></dt>
+ <dd>일반적인 플렉스박스 디자인 패턴입니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">플렉스박스의 하위 호환성</a></dt>
+ <dd>플렉스박스의 브라우저 상태, 상호 호환성 이슈와 함께 구형 브라우저와 이전 명세를 지원하는 방법을 설명합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html b/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html
new file mode 100644
index 0000000000..a9f75246aa
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html
@@ -0,0 +1,141 @@
+---
+title: 가변상자의 대표적인 사용례
+slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례
+tags:
+  - 가변상자
+  - 씨에스에스
+  - 안내서
+  - 용례
+  - 패턴
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">이번 안내서에서는 흔히 볼 수 있는 가변상자 사용 사례 중 일부를 살펴 보겠습니다. 가변상자의 사용이 다른 조판 메서드보다 더 적합한 사례입니다.</p>
+
+<h2 id="왜_가변상자를_선택">왜 가변상자를 선택?</h2>
+
+<p>완벽한 브라우저 지원 환경에서 가변상자를 사용하기로 선택한 이유는 항목 모음을 한 방향 또는 다른 방향으로 배치하길 원하기 때문입니다. 우리가 항목을 배치할 때 해당 일차원의 항목 크기를 제어하거나 항목 간 간격을 제어하려고 합니다. 이것이 가변상자를 설계한 목적에 맞는 용도입니다. <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">가변상자와 여타 씨에스에스 조판 메서드의 관계</a>에서 가변상자와 씨에스에스 격자 조판의 차이점에 대해 자세히 읽을 수 있습니다. 그곳에선 가변상자가 씨에스에스 조판의 전체 그림에서 어떤 역할을 하고 있는지에 대해 논의합니다.</p>
+
+<p>실제로 격자 조판에 의해 더 잘 수행 될 수있는 작업이나 격자에 대한 대체품 및 정렬 기능을 얻기 위해 가변상자를 종종 사용합니다. 당 사용례는 블록 조판에서 <ruby><em>상자 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby>이 구현되고 나면 변경될 수 있습니다. 이 안내서에서는 오늘날 가변상자가 쓰일 수 있는 몇 가지 대표적인 사용례를 살펴봅니다.</p>
+
+<h2 id="탐색_메뉴">탐색 메뉴</h2>
+
+<p>탐색 메뉴의 일반적인 패턴은 항목 목록을 가로 막대로 표시하는 것입니다. 이 패턴은 기본적으로 가변상자 이전에는 달성하기 어려웠습니다. 이는(탐색 가로 막대) 가장 간단한 가변상자 예제를 형성하며 이상적인 가변상자 사용 사례로 간주될 수 있습니다.</p>
+
+<p>가로로 표시하려는 항목 집합이 있으면 잉여 공간이 생길 수밖에 없습니다. 우리는 그 공간으로 무엇을 해야할지 결정해야 하며 몇 가지 선택 옵션이 있습니다. 일번 선택은 우리가 항목 무리 이외의 공간을 표시합니다. 따라서 그 사이 또는 그 주변에 공백이 생깁니다. 또는 항목 내부 여분의 공간을 흡수하려면 항목 집합이 이 공간을 확장하고 점유할 수 있는 메소드가 필요합니다.</p>
+
+<h3 id="항목_외부에_공간_분배">항목 외부에 공간 분배</h3>
+
+<p>항목 사이 또는 주위에 공간을 분배시키기 위해 가변상자의 정렬 속성과 {{cssxref("justify-content")}} 속성을 사용합니다. 이 속성에 대한 자세한 내용은 기본 축을 기준으로 항목 정렬을 처리하는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">가변 컨테이너의 항목 정렬</a>에서 확인할 수 있습니다.</p>
+
+<p>아래 실제 예에서 우리는 항목을 원래 크기로 표시하고 <code>justify-content: space-between</code>를 사용하여 항목 사이의 간격을 동일하게 만듭니다. <code>space-around</code> 값을 사용하거나, 지원이 될 경우 <code>space-evenly</code>를 사용해 공간이 분배되는 방식을 변경할 수 있습니다. <code>flex-start</code>를 사용하여 항목 끝에 공간을 배치하거나 <code>flex-end</code>를 사용하여 항목 앞에 배치하거나 <code>center</code>를 사용해 탐색 항목 중앙에 배치할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="항목_내부에_공간_분배">항목 내부에 공간 분배</h3>
+
+<p>탐색 메뉴를 위한 다른 패턴은 항목 사이에 공간을 만드는 것이 아니라 항목 자체 내에 사용 가능한 공간을 분배하는 것입니다. 이 경우, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">주축을 따라 가변 항목의 비율 제어</a>에서 설명된대로 가변 속성을 사용하여 항목이 서로 비례하여 확대 및 축소되도록 합니다.</p>
+
+<p>모든 탐색 메뉴 항목의 너비를 동일하게 하려면 <code>flex: auto</code>를 사용하면 됩니다. 그것은 <code>flex: 1 1 auto</code>의 약칭으로 모든 항목이 자동이란 가변 기반에 따라 확대되거나 축소됩니다. 여기서 자동이란 항목이 길수록 더 많은 공간이 생긴다는 말입니다.</p>
+
+<p>아래의 실제 예제에서 <code>flex: auto</code>를 <code>flex: 1</code>로 변경해보십시요. 이것은 <code>flex: 1 1 0</code>의 약칭입니다. 모든 항목이 0의 가변 기반에서 작동하여 모든 공간을 고르게 배분할 수 있기 때문에 모든 항목이 동일한 너비가 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="탐색_메뉴_분할">탐색 메뉴 분할</h2>
+
+<p>주축에서 항목을 정렬하는 또 다른 방법은 자동 여백을 사용하는 것입니다. 이를 통해 한 그룹의 항목이 왼쪽으로 정렬되고 다른 그룹이 오른쪽으로 정렬되는 탐색 모음(메뉴)의 디자인 패턴이 가능합니다.</p>
+
+<p>여기에서는 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">주축 정렬에 대한 자동 여백 사용</a>에서 설명된 자동 여백 기술을 사용합니다. 항목 무리는 <code>flex-start</code>를 사용해 주축에 정렬됩니다. 그것이 가변상자의 초기값 동작이며, 우리가 항목을 오른쪽으로 정렬하려면 왼쪽 여백을 자동으로 지정합니다. 클래스 지정을 한 항목에서 다른 항목으로 이동하여 분할이 발생하는 위치를 변경할 수 있습니다.</p>
+
+<p>또한 이 예제에서는 가변 항목에 여백을 사용하여 항목 사이에 간격을 만들고 컨테이너에 음의 여백을 사용하여 항목이 여전히 오른쪽 및 왼쪽 가장자리와 맞붙도록 합니다. <ruby><em>박스 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby> 규격의 <code>gap</code> 속성이 가변상자에 구현될 때까지 항목 간에 배수구를 만들려면 이 방식으로 여백을 사용해야 합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="항목_중심에_놓기">항목 중심에 놓기</h2>
+
+<p>가변상자 이전에 개발자들은 웹 디자인에서 가장 어려운 문제는 수직 중심이라고 농담할겁니다. 다음 실제 예제에서 볼 수 있듯이 가변상자의 정렬 속성을 사용하여 간단하게 만들었습니다.</p>
+
+<p>항목에 <code>flex-start</code>를 지정해 시작 부분으로 정렬하거나 <code>flex-end</code>를 지정해 끝 부분에 항목을 정렬하는 식으로 정렬을 맘대로 조정할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p><ruby><em>박스 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby> 속성은 궁극적으로 블록 조판의 내용으로 구현될 예정이므로 미래에는 단일 아이템을 중앙에 배치하기 위해 컨테이너를 가변 컨테이너로 만들 필요는 없습니다. 그러나 당장은 하나의 것을 다른 것의 중심에 올바로 배치해야하는 경우 가변상자를 사용하는 게 맞습니다. 위의 예에서와 같이 컨테이너를 가변 컨테이너로 만든 다음 상위 요소에 대해 <code>align-items</code>을 사용하거나 가변 항목 자체를 <code>align-self</code>로 공략합니다.</p>
+
+<h2 id="바닥글을_아래로_밀어내는_카드_조판">바닥글을 아래로 밀어내는 카드 조판</h2>
+
+<p>가변상자 또는 씨에스에스 격자를 사용하여 카드 구성 요소의 목록을 조판하더라도, 이들 조판 메서드는 가변 또는 격자 구성 요소의 직계 자식에서만 작동합니다. 즉, 콘텐츠의 크기가 가변적이면 카드가 격자 영역의 높이나 가변 컨테이너의 높이까지 늘어납니다. 모든 내부 콘텐츠는 친숙한 블록 조판을 사용합니다. 즉, 콘텐츠가 적은 카드에서는 바닥글이 카드의 아래쪽에 고정되지 않고 콘텐츠의 밑단까지 차오릅니다.</p>
+
+<p><img alt="구성 요소의 내부가 (상위) 랩퍼와 함께 늘어나지 않음을 표시하는 두 개의 카드 구성 요소." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>가변상자가 이를 해결할 수 있습니다. 우리는 {{cssxref("flex-direction")}}<code>: column</code> 속성를 가진 카드를 가변 컨테이너로 만듭니다. 그런 다음 컨텐츠 영역을 <code>flex: 1</code>로 설정합니다. 이는 <code>flex: 1 1 0</code>의 축약형입니다. — 항목이 <code>0</code>의 가변 기준에서 커지거나 줄어들 수 있습니다. 이것이(컨텐츠 영역이) 커질 수 있는 유일한 항목이므로 가변 컨테이너에 있는 잉여 공간을 차지하고 바닥글을 바닥으로 밉니다. 라이브 예제에서 <code>flex</code> 속성을 제거하면 바닥글이 컨텐츠 바로 아래로 이동하는 방식을 볼 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="미디어_객체">미디어 객체</h2>
+
+<p>미디어 객체는 웹 디자인에서 일반적인 패턴입니다. 이 패턴에는 한쪽에 이미지 나 다른 요소가 있고 오른쪽에 텍스트가 있습니다. 이상적으로 미디어 개체를 반대쪽으로 돌릴 수 있어야 합니다. 말하자면 이미지를 왼쪽에서 오른쪽으로 이동시키는 겁니다.</p>
+
+<p>이 패턴은 어디에서나 볼 수 있으며, 주석 상자용으로 쓰이기도 하고, 이미지와 설명을 표시해야하는 모든 곳에서 볼 수 있습니다. 가변상자를 사용하면 이미지를 포함하는 미디어 객체의 일부가 이미지에서 크기 정보를 가져온 다음 미디어 객체의 본문이 가변적으로 남은 공간을 차지할 수 있습니다.</p>
+
+<p>여러분은 아래 실제 예제에서 미디어 객체를 볼 수 있습니다. 정렬 속성을 사용하여 십자축의 항목을 <code>flex-start</code>로 정렬한 다음 <code>.content</code> 가변 항목을 <code>flex: 1</code>로 설정했습니다. 위의 열 조판 카드 패턴에서와 같이 <code>flex: 1</code>를 사용하면 카드가 커질 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>이 라이브 예제에서 시도할 수 있는 것은 디자인에서 미디어 개체를 제약하려는 여러 가지 방법과 관련이 있습니다.</p>
+
+<p>이미지가 너무 커지는 것을 방지하려면 이미지에 {{cssxref("max-width")}}를 추가하십시오. 미디어 객체의 그쪽 측면이 가변상자의 초기값(예: 100px)을 사용함에 따라 줄어들지만 커질 수는 없으며 <code>flex-basis</code>는 자동을 사용합니다. 이미지에 적용된 모든 {{cssxref("width")}} 또는 최대 너비는 <ruby><code>flex-basis</code><rp> (</rp><rt>가변 기준</rt><rp>) </rp></ruby>이 됩니다.</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>또한 양쪽이 비례하여 커지거나 줄어들 수 있습니다. 양면을 <code>flex: 1</code>로 설정하면 0의 {{cssxref("flex-basis")}}에서 커지거나 줄어들기 때문에 두 개의 동일한 크기의 열이 생깁니다. 컨텐츠를 기준으로 사용하여 (컨텐츠와 이미지) 둘 다에 <code>flex: auto</code>로 설정하면 컨텐츠의 크기에 따라, 또는 이미지의 너비와 같은 가변 항목에 직접 적용되는 크기에 따라 커지거나 줄어들 수 있습니다.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>예를 들어 이미지가 있는 쪽을 <code>flex: 1</code>로 설정하고 콘텐츠 쪽을 <code>flex: 3</code>으로 설정하는 등 각면에 서로 다른 {{cssxref("flex-grow")}}를 부여할 수 있습니다. 즉, <code>flex-basis</code>를 <code>0</code>으로 사용하지만 해당 공간을 <code>flex-grow</code> 인수에 맞춰 서로 다르게 공간을 할당합니다. 그런 용도로 사용하는 가변 속성은 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">주축을 따라 가변 항목의 비율 제어</a> 안내서에서 자세히 설명되어 있습니다.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="미디어_객체_방향_돌리기">미디어 객체 방향 돌리기</h3>
+
+<p>이미지가 오른쪽에 있고 콘텐츠가 왼쪽에 있도록 미디어 객체의 표시를 전환하려면 <code>flex-direction</code> 속성을 이용해 <code>row-reverse</code>로 설정할 수 있습니다. 미디어 개체가 이제 다른 방향으로 표시됩니다. 저는 그걸 달성하기 위해 라이브 예제에서 기존 <code>.media</code> 클래스와 함께 <code>flipped</code> 클래스를 추가했습니다. 즉, 에이치티엠엘에서 해당 클래스를 제거하여 디스플레이가 어떻게 변경되는지 확인할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="양식_컨트롤">양식 컨트롤</h2>
+
+<p>가변상자는 양식 컨트롤에 스타일을 적용할 때 특히 유용합니다. 양식에는 일반적으로 서로 정렬하고 싶은 다수의 마크업과 다수의 작은 요소를 포함할 수 있습니다. 일반적인 패턴은 {{htmlelement("input")}} 요소가 {{htmlelement("button")}}과 짝을 이루는 검색 양식의 경우나 방문자가 단순히 전자 메일 주소를 입력하도록 하려는 경우입니다.</p>
+
+<p>가변상자를 사용하면 이러한 유형의 조판을 쉽게 달성할 수 있습니다. 테두리를 지정하고 표시하도록 설정한 래퍼 클래스에 <code>&lt;button&gt;</code> 및 <code>&lt;input&gt;</code> 필드가 포함되어 있습니다. 거기에 테두리를 부여하고 <code>display: flex</code>를 설정했습니다. 그런 다음 가변 속성을 사용하여 <code>&lt;input&gt;</code> 필드가 커지도록 했고, 버튼은 그렇지 않습니다. 이것은 사용 가능한 공간이 변함에 따라 텍스트 필드가 커지거나 작아지는 한 쌍의 필드가 있음을 의미합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>버튼을 오른쪽에 올려 놓은 것처럼 레이블이나 아이콘을 왼쪽에 쉽게 추가 할 수 있습니다. 나는 레이블을 추가했으며 배경색에 대한 스타일링 이외에 조판을 변경할 필요가 없었습니다. 신축성있는 입력 필드는 이제 맘대로 이용할 공간이 조금 줄어들지만 두 항목의 지분이 고려된 후 남은 공간을 사용합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>이와 같은 패턴을 사용하면 디자인에 추가할 요소를 쉽게 수용할 수 있는 양식 요소 라이브러리를 훨씬 쉽게 만들 수 있습니다. 커지지 않는 항목과 커지는 항목을 혼합하는 식으로 가변상자의 유연성을 활용하고 있습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>위의 패턴을 살펴보면서 가변 상자를 사용하여 원하는 결과를 얻는 가장 좋은 방법을 여러분이 생각을 통해 파악되기 시작했길 희망해봅니다. 종종 하나 이상의 선택이 있습니다. 늘릴 수 없는 항목을 늘릴 수 있는 것과 혼합하거나, 콘텐츠를 사용하여 크기를 알리거나, 가변상자가 공간을 비례적으로 공유할 수 있도록 하십시오. 그것은 당신에게 달려 있습니다.</p>
+
+<p>보유 컨텐츠를 제시하는 가장 좋은 방법을 생각한 다음 가변상자 또는 기타 조판 방법이 컨텐츠를 선보이는 데 어떻게 도움이 되는지 살펴보십시오.</p>