wiki:css:css_note:css_flex_container

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_flex_container [2021/07/05 16:59]
emblim98 [align-content: flex-end 예제]
+++ wiki:css:css_note:css_flex_container [2023/01/13 18:44] (현재)
@@ 줄 1051: / 줄 1051: @@
 </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에 대한 단축 속성                                          |

/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_flex_container.1625471989.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)