차이

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

--- wiki:css:css_note:css_flexbox [2021/03/16 11:35]
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>
+<!DOCTYPE html>
+<html lang="en">
+<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>Flexible Boxes</title>
+    <style>
+        .flex-container {
+            display: flex;
+            background-color: dodgerblue;
+            flex-wrap: nowrap;
+        }
+        .flex-container>div {
+            background-color: #f1f1f1;
+            width: 100px;
+            margin: 10px;
+            text-align: center;
+            line-height: 75px;
+            font-size: 30px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Flexible Boxes</h1>
+    <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>
+    <p>Try to resize the browser window</p>
+    <p>A containr with "flex-wrap: nowrap;" will never wrap its items.</p>
+    <p><strong>Note:</strong> Flexbox is not supportd in Internet Explorer 10 or earlier versions</p>
+</body>
+</html>
+</code>
+\\
+=====CSS Flexbox Layout Module=====
+플렉스박스 레이아웃 모듈 이전에, 4개의 레이아웃 모듈이 있었습니다.\\
+  * 웹페이지의 섹션을 위한 Block
+  * 텍스트를 위한 Inline
+  * 2차원 테이블 데이터를 위한 Table
+  * 요소의 위치 명시를 위한 Positioned
+플렉스박스 레이아웃 모듈은 float 또는 positioning을 사용하지 않고 유연한 반응형 레이아웃 구조 설계를 더 쉽게 만듭니다.\\
+\\
+=====Browser Support=====
+플렉스박스 속성을 모든 현대의 브라우저가 지원합니다.(Chrome, Internet Explorer/Edge, Firefox, Safari, Opera)\\
+\\
+=====Flexbox Elements=====
+플레스박스 모델 사용을 시작하기 위해서, 먼저 플렉스 컨테이너(flex container)를 정의해야 합니다.\\
+====예제====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<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,}}

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

사용자 도구

사이트 도구

차이

문서 도구