From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/flex-wrap/index.html | 159 ++++++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/ko/web/css/flex-wrap/index.html (limited to 'files/ko/web/css/flex-wrap') diff --git a/files/ko/web/css/flex-wrap/index.html b/files/ko/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..7ee27b4386 --- /dev/null +++ b/files/ko/web/css/flex-wrap/index.html @@ -0,0 +1,159 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
+ + + +

여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. Using CSS flexible boxes

+ +

Syntax

+ +
flex-wrap: nowrap; /* Default value */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

flex-wrap 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.

+ +

Values

+ +

아래는 사용 가능한 속성값들입니다:

+ +
+
nowrap
+
기본 설정값으로, flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치합니다. 시작점은 {{cssxref("flex-direction")}} 에 의해 결정된 방향으로 적용됩니다.
+
wrap
+
flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. nowrap 속성과 마찬가지로 요소가 배치되는 시작점은 {{cssxref("flex-direction")}} 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.
+
wrap-reverse
+
wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.
+
+

Formal syntax

+
+
+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Results

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-wrap")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf