차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_flex_container [2021/07/05 16:45]
emblim98 [Example]
+++ wiki:css:css_note:css_flex_container [2023/01/13 18:44] (현재)
@@ 줄 340: / 줄 340: @@
 {{:wiki:css:css_note:flex-flow.png?400|}}\\
-====Example====
+=====Example=====
 <code css>
@@ 줄 386: / 줄 386: @@
 {{:wiki:css:css_note:justify-content.png?400|}}\\
-====Example====
+=====Example=====
 ''center''값은 컨테이너의 중앙에 플렉스 아이템들을 정렬합니다.\\
 <code css>
@@ 줄 760: / 줄 760: @@
 </body>
 </code>
+\\
+\\
 ======The align-content Property======
 ''align-content'' 속성은 플렉스 라인들을 정렬하는데 사용됩니다.\\
@@ 줄 861: / 줄 863: @@
 </code>
 ===== Example =====
-''space-stretch'' 값은 플렉스 라인들을 펼쳐서 남은 공간을 차지합니다.(기본 값)\\
+''stretch'' 값은 플렉스 라인들을 펼쳐서 남은 공간을 차지합니다.(기본 값)\\
 {{:wiki:css:css_note:align-content-stretch.png?400|}}\\
 <code css>
@@ 줄 907: / 줄 909: @@
 </body>
 </code>
-====align-content: center 예제====
+===== Example =====
 ''center''값은 컨테이너 중간에 플렉스 라인들을 표시합니다.\\
+{{:wiki:css:css_note:align-content-center.png?400|}}\\
 <code css>
-.flex-container {
+  <style>
-  display: flex;
+    .flex-container {
-  height: 600px;
+      display: flex;
-  flex-wrap: wrap;
+      height: 600px;
-  align-content: center;
+      flex-wrap: wrap;
-}
+      align-content: center;
+      background-color: dodgerblue;
+    }
+    .flex-container > div {
+      background-color: #f1f1f1;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The align-content Property</h1>
+  <p>The "align-content: center;" displays the flex lines
+    in the middle of the container:</p>
+  <div class="flex-container">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+    <div>9</div>
+    <div>10</div>
+    <div>11</div>
+    <div>12</div>
+  </div>
+</body>
 </code>
-\\
+===== Example =====
-====align-content: flex-start 예제====
 ''flex-start''값은 컨테이너의 시작 부분에서 플렉스 라인들을 표시합니다.\\
+{{:wiki:css:css_note:align-content-flex-start.png?400|}}\\
 <code css>
-.flex-container {
+<style>
-  display: flex;
+    .flex-container {
-  height: 600px;
+      display: flex;
-  flex-wrap: wrap;
+      height: 600px;
-  align-content: flex-start;
+      flex-wrap: wrap;
-}
+      align-content: flex-start;
+      background-color: dodgerblue;
+    }
+    .flex-container > div {
+      background-color: #f1f1f1;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The align-content Property</h1>
+  <p>The "align-content: flex-start;" displays the flex lines
+    at the start of the container.</p>
+  <div class="flex-container">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+    <div>9</div>
+    <div>10</div>
+    <div>11</div>
+    <div>12</div>
+  </div>
+</body>
 </code>
-\\
+===== Example =====
-====align-content: flex-end 예제====
+''flex-end''값은 컨테이너의 끝 부분에서 플렉스 라인들을 표시합니다.\\
-''flex-start''값은 컨테이너의 끝 부분에서 플렉스 라인들을 표시합니다.\\
+{{:wiki:css:css_note:align-content-flex-end.png?400|}}\\
 <code css>
-.flex-container {
+  <style>
-  display: flex;
+    .flex-container {
-  height: 600px;
+      display: flex;
-  flex-wrap: wrap;
+      height: 600px;
-  align-content: flex-end;
+      flex-wrap: wrap;
-}
+      align-content: flex-end;
+      background-color: dodgerblue;
+    }
+    .flex-container > div {
+      background-color: #f1f1f1;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The align-content Property</h1>
+  <p>The "align-content: flex-end;" displays the flex lines
+    at the end of the container.</p>
+  <div class="flex-container">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+    <div>9</div>
+    <div>10</div>
+    <div>11</div>
+    <div>12</div>
+  </div>
+</body>
 </code>
-\\
+=====Perfect Centering=====
-====Perfect Centering====
 하기의 예제들에서 아주 일반적인 스타일 문제인 완벽한 중앙 정렬 방안을 확인하겠습니다.\\
-**SOLUTION:** 두 개의 ''justify-content''와 ''align-items'' 속성을 ''center''로 설정하면, 플렉스 아이템드른 완벽히 중앙정렬될 것입니다.\\
+{{:wiki:css:css_note:perfect-centering.png?400|}}\\
-<code css>
-.flex-container {
-  display: flex;
-  height: 300px;
-  justify-content: center;
-  align-items: center;
-}
-</code>
 \\
-=====All CSS Flexbox Container Properties=====
+**SOLUTION:** 두 개의 ''justify-content''와 ''align-items'' 속성을 ''center''로 설정하면, 플렉스 아이템은 완벽히 중앙으로 정렬될 것입니다.\\
+<code css>
+<style>
+    .flex-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 300px;
+      background-color: DodgerBlue;
+    }
+    .flex-container > div {
+      background-color: #f1f1f1;
+      color: white;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Perfect Centering</h1>
+  <p>A container with both the justify-content and the align-items properties
+  set to <em>center</em> will align the item(s) in the center (in both axis).</p>
+  <div class="flex-container">
+    <div></div>
+  </div>
+</body>
+</code>
+======All CSS Flexbox Container Properties======
 ^ Property         ^ Description                                                                  ^
 | align-center     | flex-wrap 속성의 작용을 수정합니다. align-items와 유사하지만 플렉스 아이템을 정렬하는 대신 플레스 라인을 정렬합니다.  |
 | align-items      | 아이템들이 교차축에서 이용할 수 있는 모든 공간을 사용하지 않는 경우 플렉스 아이템을 수직으로 정렬합니다.                  |
-| display          | HTML 요소에 사용된 박스 타입을 지정합니다.                                                   |
+| display          | %%HTML%% 요소에 사용된 박스 타입을 지정합니다.                                               |
 | flex-direction   | 플렉스 컨테이너 내부의 플렉스 아이템의 방향을 지정합니다.                                             |
 | flex-flow        | flex-direction과 flex-wrap에 대한 단축 속성                                          |

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구