차이

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

--- wiki:css:css_note:css_flex_items [2021/07/16 11:51]
emblim98
+++ wiki:css:css_note:css_flex_items [2023/01/13 18:44] (현재)
@@ 줄 199: / 줄 199: @@
 </code>
+===== The flex-basis Property =====
+''%%flex-basis%%'' 속성은 어떤 하나의 flex item에 대한 초기 길이 값을 지정합니다.\\
+\\
+{{:wiki:css:css_note:flex-basis-property.png|}}\\
+==== Example ====
+세 번째 flex item의 초기 길이 값을 200px로 설정합니다.\\
+<code css>
+  <style>
+    .flex-container {
+      display: flex;
+      align-items: stretch;
+      background-color: #f1f1f1;
+    }
+    .flex-container>div {
+      background-color: dodgerblue;
+      color: #fff;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The flex-basis Property</h1>
+  <p>Set the initial length of the third flex item to 200 pixels:</p>
+  <div class="flex-container">
+    <div>1</div>
+    <div>2</div>
+    <div style="flex-basis: 200px">3</div>
+    <div>4</div>
+  </div>
+</body>
+</code>
+===== The flex Property =====
+''%%flex%%'' 속성은 ''%%flex-grow%%'', ''%%flex-shrink%%'', 그리고 ''%%flex-basis%%'' 속성들에 대한 약칭 속성입니다.\\
+\\
+==== Example ====
+하기 예제는 세 번째 flex item이 확장되지도, 축소되지도 않게 만들고, 초기 길이 값 200pixel을 가지게 합니다.\\
+<code css>
+  <style>
+    .flex-container {
+      display: flex;
+      align-items: stretch;
+      background-color: #f1f1f1;
+    }
+    .flex-container>div {
+      background-color: dodgerblue;
+      color: #fff;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The flex Property</h1>
+  <p>
+    Make the third flex item not growable (0), not shrinkable (0), and with an initial length 0f 200 pixels:
+  </p>
+  <div class="flex-container">
+    <div>1</div>
+    <div>2</div>
+    <div style="flex: 0 0 200px">3</div>
+    <div>4</div>
+  </div>
+</body>
+</code>
+===== The align-self Property =====
+''%%align-self%%'' 속성은 플렉서블 컨테이너 내부에서 선택한 플렉스 아이템에 대한 정렬 방식을 지정합니다.\\
+\\
+''%%align-self%%'' 속성은 플렉서블 컨테이너의 ''%%align-items%%'' 속성에 의해 설정된 기본 정렬 방식보다도 더 우선시됩니다.\\
+\\
+{{:wiki:css:css_note:align-self-property.png|}}\\
+\\
+아래의 2개 예제에서는 200픽셀 높이의 플렉스 컨테이너를 사용하여 ''%%align-self%%'' 속성을 더 잘 나타냅니다.\\
+\\
+==== Example ====
+컨테이너의 중간에 있는 세 번째 플렉스 아이템을 정렬합니다.\\
+<code css>
+  <style>
+    .flex-container {
+      display: flex;
+      height: 200px;
+      background-color: #f1f1f1;
+    }
+    .flex-container>div {
+      background-color: dodgerblue;
+      color: #fff;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The align-self Property</h1>
+  <p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>
+  <div class="flex-container">
+    <div>1</div>
+    <div>2</div>
+    <div style="align-self: center">3</div>
+    <div>4</div>
+  </div>
+</body>
+</code>
+==== Example ====
+컨테이너의 상단에 두 번째 플레스 아이템을 정렬하고, 컨테이너의 하단에 플렉스 아이템을 정렬합니다.\\
+\\
+{{:wiki:css:css_note:alignselfproperty.png|}}\\
+<code css>
+  <style>
+    .flex-container {
+      display: flex;
+      height: 200px;
+      background-color: #f1f1f1;
+    }
+    .flex-container>div {
+      background-color: dodgerblue;
+      color: #fff;
+      width: 100px;
+      margin: 10px;
+      text-align: center;
+      line-height: 75px;
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>The align-self Property</h1>
+  <p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
+  <p>The "align-self: flex-end;"aligns the selected flex item at the bottom of the container.</p>
+  <div class="flex-container">
+    <div>1</div>
+    <div style="align-self: flex-start">2</div>
+    <div style="align-self: flex-end">3</div>
+    <div>4</div>
+  </div>
+  <p>The align-self property overrides the align-items property of the container.</p>
+</body>
+</code>
+===== The CSS Flexbox Items Properties =====
+다음 표에는 모든 %%CSS Flexbox%% 항목 속성이 나열되어 있습니다.\\
+^ Property     ^ Description                                                   ^
+| align-self   | 플렉스 아이템의 정렬을 지정합니다(플렉스 컨테이너의 align-items 속성보다 우선시됩니다).        |
+| flex         | flex-grow, flex-shrink 및 flex-basis 속성에 대한 약식 속성              |
+| flex-basis   | 플렉스 항목의 초기 길이를 지정합니다.                                         |
+| flex-grow    | 동일한 컨테이너 내부의 나머지 플렉스 아이템에 비례하여 플렉스 항목이 얼마나 확장될 것인지를 지정합니다.    |
+| flex-shrink  | 동일한 컨테이너 내부의 나머지 플렉스 아이템들에 비례하여 플렉스 아이템이 얼마나 축소될 것인지를 지정합니다.  |
+| order        | 동일한 컨테이너 내부에서 플렉스 아이템들의 순서를 지정합니다.                            |

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

사용자 도구

사이트 도구

차이

문서 도구