wiki:css:css_note:css_flexbox

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_flexbox [2021/03/16 12:31]
emblim98
+++ wiki:css:css_note:css_flexbox [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ====== CSS Flexbox ======
-<WRAP left notice 80%>
+<WRAP left notice 70%>
   * description : CSS Lists,
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2021-03-16
+  * lastupdate  : 2021-07-05
 </WRAP>
 <WRAP clear></WRAP>
@@ 줄 10: / 줄 10: @@
 \\
 =====Source of the article====
-  * [[https://www.w3schools.com/css/css_list.asp|CSS Lists]]
+[[https://www.w3schools.com/css/css3_flexbox.asp|CSS Flexbox]]\\
-\\
 \\
 ======CSS Flexbox======
+{{:wiki:css:css_note:flex-box-01.png?400|}}\\
+\\
 ====예제====
 <code css>
@@ 줄 79: / 줄 81: @@
 ====예제====
 <code css>
+<!DOCTYPE html>
+<html lang="en">
-</code>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flex Container</title>
+    <style>
+        .flex-container {
+            /* parent element */
+            background-color: dodgerblue;
+            display: flex;
+        }
+        .flex-container>div {
+            /* direct child elements of the flexible container = flexible itmes */
+            border: 2px solid green;
+            background-color: #f1f1f1;
+            margin: 10px;
+            padding: 20px;
+            font-size: 30px;
+        }
+    </style>
+</head>
+<body>
+    <!-- .flex-container>div*3 -->
+    <div class="flex-container">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+    </div>
+    <p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
+    <p>Direct child element(s) of the flexible container automatically becomes flexible items.</p>
+</body>
+</html>
+</code>
+=====Ref=====
+{{:wiki:css:css_note:flexbox_layout.png?600|}}
 {{tag>오션, CSS Flexbox,}}

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