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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_flex_items
wiki:css:css_note:css_flex_items

차이

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

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_flex_items [2021/07/16 08:49]
emblim98 만듦 		wiki:css:css_note:css_flex_items [2023/01/13 18:44] (현재)
줄 16: 줄 16:
 flex container의 직계 자식 요소들은 자동으로 flexible (flex) items가 됩니다.\\ flex container의 직계 자식 요소들은 자동으로 flexible (flex) items가 됩니다.\\
 \\ \\
-{{:wiki:css:css_note:direct-child-elements.png|}} +{{:wiki:css:css_note:direct-child-elements.png|}}\\ 
-위의 요소는 그레이 컬러의 flex container 내부의 4개의 블루 컬러의 flex items를 나타냅니다.\\+\\ 
 +위의 요소는 그레이 컬러의 flex container 내부에 4개의 블루 컬러의 flex items를 나타냅니다.\\
  
 <code css> <code css>
 +<style>
 +  .flex-container {
 +    display: flex;
 +    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>Flexible Items</h1>
 +
 +  <div class="flex-container">
 +    <div>1</div>
 +    <div>2</div>
 +    <div>3</div>
 +    <div>4</div>
 +  </div>
 +
 +  <p>All direct children of a flexible container becomes flexible items.</p>
 +</body>
 +</html>
 </code> </code>
 +\\
 +flex item 속성들은 하기와 같습니다.
 +  * ''%%order%%''
 +  * ''%%flex-grow%%''
 +  * ''%%flex-shrink%%''
 +  * ''%%flex-basis%%''
 +  * ''%%flex%%''
 +  * ''%%align-self%%''
  
 +===== The order Property =====
 +''%%order%%'' 속성은 flex items의 순서를 지정합니다.\\
 +\\
 +{{:wiki:css:css_note:flex-item-order-property.png|}}\\
 +\\
 +코드 상의 첫 번째 flex item은 레이아웃에서 첫 번째 아이템으로 나타날 필요는 없습니다.\\
 +order값은 숫자이어야 하고, 기본 값은 0 입니다.\\
  
 +==== Example ====
 +/order/ 속성은 flex items의 순서를 변경할 수 있습니다.
 +<code css>
 +  <style>
 +    .flex-container {
 +      display: flex;
 +      align-items: stretch;
 +      background-color: #f1f1f1;
 +    }
  
 +    .flex-container>div {
 +      background-color: Dodgerblue;
 +      color: white;
 +      width: 100px;
 +      margin: 10px;
 +      text-align: center;
 +      line-height: 75px;
 +      font-size: 30px;
 +    }
 +  </style>
 +</head>
  
 +<body>
  
 +  <h1>The order Property</h1>
 +
 +  <p>Use the order property to sort the flex items as you like:</p>
 +
 +  <div class="flex-container">
 +    <div style="order: 3">1</div> <!-- 1번 박스를 세 번째로 -->
 +    <div style="order: 2">2</div> <!-- 2번 박스를 두 번째로 -->
 +    <div style="order: 4">3</div> <!-- 3번 박스를 네 번째로 -->
 +    <div style="order: 1">4</div> <!-- 4번 박스를 첫 번째로 -->
 +  </div>
 +
 +</body>
 +</code>
 +
 +===== The flex-grow Property =====
 +''%%flex-grow%%'' 속성은 어떤 하나의 flex item이 나머지 flex items에 비례하여 얼마나 많이 확장될 수 있는 지를 지정합니다.\\
 +\\
 +{{:wiki:css:css_note:flex-grow-property.png|}}\\
 +\\
 +값은 숫자이어야 하며, 기본 값은 0입니다.\\
 +
 +<code css>
 +  <style>
 +    .flex-container {
 +      display: flex;
 +      align-items: stretch;
 +      background-color: #f1f1f1;
 +    }
 +
 +    .flex-container>div {
 +      background-color: dodgerblue;
 +      color: white;
 +      margin: 10px;
 +      /* 박스의 너비가 지정되지 않았습니다. */
 +      text-align: center;
 +      line-height: 75px;
 +      font-size: 30px;
 +    }
 +  </style>
 +
 +</head>
 +
 +<body>
 +  <h1>The flex-grow Property</h1>
 +
 +  <p>Make the third flex item grow eight times faster than the other flex items:</p>
 +
 +  <div class="flex-container">
 +    <div style="flex-grow: 1">1</div>
 +    <div style="flex-grow: 1">2</div>
 +    <div style="flex-grow: 8">3</div>
 +    <!-- 3번 박스는 브라우저 창의 너비와 상관없이 항상 1번, 2번 박스에 비해 8배 너비를 유지합니다. -->
 +  </div>
 +</body>
 +</code>
 +
 +===== The flex-shrink Property =====
 +''%%flex-shrink%%'' 속성은 어떤 하나의 flex item이 나머지 flex item에 비례하여 얼마나 많이 축소될 수 있는 지를 지정합니다.\\
 +\\
 +{{:wiki:css:css_note:flex-shrink-property.png|}}\\
 +\\
 +값은 숫자이어야 하며, 기본 값은 1 입니다.\\
 +
 +==== Example ====
 +세 번째 flex item이 나머지 다른 flex items만큼 축소되지 않게 하는 예제입니다\\
 +<code css>
 +  <style>
 +    .flex-container {
 +      display: flex;
 +      align-items: stretch;
 +      background-color: #f1f1f1;
 +    }
 +
 +    .flex-container>div {
 +      background-color: dodgerblue;
 +      color: white;
 +      width: 100px;
 +      margin: 10px;
 +      text-align: center;
 +      line-height: 75px;
 +      font-size: 30px;
 +    }
 +  </style>
 +</head>
 +
 +<body>
 +  <h1>The flex-shrink Property</h1>
 +
 +  <p>Do not let the third flex item shrink as much as the other flex items:</p>
 +
 +  <div class="flex-container">
 +    <div>1</div>
 +    <div>2</div>
 +    <div style="flex-shrink: 0">3</div>
 +    <div>4</div>
 +    <div>5</div>
 +    <div>6</div>
 +    <div>7</div>
 +    <div>8</div>
 +    <div>9</div>
 +    <div>10</div>
 +  </div>
 +</body>
 +</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        | 동일한 컨테이너 내부에서 플렉스 아이템들의 순서를 지정합니다.                            |
  
  
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_flex_items.1626392995.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki