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

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_flex_container [2021/07/05 16:43]
emblim98 [CSS Flex Container] 		wiki:css:css_note:css_flex_container [2023/01/13 18:44] (현재)
줄 172: 줄 172:
 </body> </body>
 </code> </code>
-\\ 
 ===== Example ===== ===== Example =====
 ''row-reverse''값은 우측에서 좌측 가로 방향으로 플렉스 아이템을 배치합니다.\\ ''row-reverse''값은 우측에서 좌측 가로 방향으로 플렉스 아이템을 배치합니다.\\
줄 197: 줄 196:
 <body> <body>
   <h1>The flex-direction Property</h1>   <h1>The flex-direction Property</h1>
-  <p>The "flex-direction: row-reverse;" stacks the flex items horizontally (from right to top):</p>+  <p>The "flex-direction: row-reverse;" stacks the flex items horizontally  
 +     (from right to top):</p>
   <div class="flex-container">   <div class="flex-container">
     <div>1</div>     <div>1</div>
줄 293: 줄 293:
 </body> </body>
 </code> </code>
-\\ 
 ===== Example ===== ===== Example =====
 ''flex-wrap: wrap-reverse'' 속성은 필요한 경우 역순으로 플렉스 아이템이 wrap되도록 지정합니다.\\ ''flex-wrap: wrap-reverse'' 속성은 필요한 경우 역순으로 플렉스 아이템이 wrap되도록 지정합니다.\\
줄 337: 줄 336:
 </body> </body>
 </code> </code>
-\\ 
 ======The flex-flow Property====== ======The flex-flow Property======
 ''flex-flow''속성은 ''flex-direction''과''flex-wrap'' 속성 2가지 모두를 설정하기 위한 속기 속성입니다.\\ ''flex-flow''속성은 ''flex-direction''과''flex-wrap'' 속성 2가지 모두를 설정하기 위한 속기 속성입니다.\\
 {{:wiki:css:css_note:flex-flow.png?400|}}\\ {{:wiki:css:css_note:flex-flow.png?400|}}\\
  
-====Example====+=====Example=====
  
 <code css> <code css>
줄 384: 줄 382:
 </body> </body>
 </code> </code>
-\\ 
 ======The justify-content Property====== ======The justify-content Property======
 ''justify-content''속성은 플렉스 아이템을 정렬하기 위해 사용합니다.\\ ''justify-content''속성은 플렉스 아이템을 정렬하기 위해 사용합니다.\\
 {{:wiki:css:css_note:justify-content.png?400|}}\\ {{:wiki:css:css_note:justify-content.png?400|}}\\
  
-====Example====+=====Example=====
 ''center''값은 컨테이너의 중앙에 플렉스 아이템들을 정렬합니다.\\ ''center''값은 컨테이너의 중앙에 플렉스 아이템들을 정렬합니다.\\
 <code css> <code css>
줄 763: 줄 760:
  
 </body> </body>
-</code>  +</code> 
 +\\ 
 +\\
 ======The align-content Property====== ======The align-content Property======
 ''align-content'' 속성은 플렉스 라인들을 정렬하는데 사용됩니다.\\ ''align-content'' 속성은 플렉스 라인들을 정렬하는데 사용됩니다.\\
줄 864: 줄 863:
 </code> </code>
 ===== Example ===== ===== Example =====
-''space-stretch'' 값은 플렉스 라인들을 펼쳐서 남은 공간을 차지합니다.(기본 값)\\+''stretch'' 값은 플렉스 라인들을 펼쳐서 남은 공간을 차지합니다.(기본 값)\\
 {{:wiki:css:css_note:align-content-stretch.png?400|}}\\ {{:wiki:css:css_note:align-content-stretch.png?400|}}\\
 <code css> <code css>
줄 910: 줄 909:
 </body> </body>
 </code>   </code>  
-====align-content: center 예제====+===== Example =====
 ''center''값은 컨테이너 중간에 플렉스 라인들을 표시합니다.\\ ''center''값은 컨테이너 중간에 플렉스 라인들을 표시합니다.\\
 +{{:wiki:css:css_note:align-content-center.png?400|}}\\
 +
 <code css> <code css>
-.flex-container { +  <style> 
-  display: flex; +    .flex-container { 
-  height: 600px; +      display: flex; 
-  flex-wrap: wrap; +      height: 600px; 
-  align-content: center; +      flex-wrap: wrap; 
-}+      align-content: center; 
 +      background-color: dodgerblue; 
 +    } 
 + 
 +    .flex-container > div { 
 +      background-color: #f1f1f1; 
 +      width: 100px; 
 +      margin: 10px; 
 +      text-align: center; 
 +      line-height: 75px; 
 +      font-size: 30px; 
 +    } 
 +  </style> 
 +</head> 
 +<body> 
 + 
 +  <h1>The align-content Property</h1> 
 + 
 +  <p>The "align-content: center;" displays the flex lines 
 +    in the middle of the container:</p> 
 +   
 +  <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>9</div> 
 +    <div>10</div> 
 +    <div>11</div> 
 +    <div>12</div> 
 +  </div> 
 + 
 +</body>
 </code>   </code>  
-\\   +===== Example =====
-====align-content: flex-start 예제====+
 ''flex-start''값은 컨테이너의 시작 부분에서 플렉스 라인들을 표시합니다.\\ ''flex-start''값은 컨테이너의 시작 부분에서 플렉스 라인들을 표시합니다.\\
 +{{:wiki:css:css_note:align-content-flex-start.png?400|}}\\
 <code css> <code css>
-.flex-container { +<style> 
-  display: flex; +    .flex-container { 
-  height: 600px; +      display: flex; 
-  flex-wrap: wrap; +      height: 600px; 
-  align-content: flex-start; +      flex-wrap: wrap; 
-}+      align-content: flex-start; 
 +      background-color: dodgerblue; 
 +    } 
 + 
 +    .flex-container > div { 
 +      background-color: #f1f1f1; 
 +      width: 100px; 
 +      margin: 10px; 
 +      text-align: center; 
 +      line-height: 75px; 
 +      font-size: 30px; 
 +    } 
 +  </style> 
 +</head> 
 +<body> 
 + 
 +  <h1>The align-content Property</h1> 
 + 
 +  <p>The "align-content: flex-start;" displays the flex lines 
 +    at the start of the container.</p> 
 +   
 +  <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>9</div> 
 +    <div>10</div> 
 +    <div>11</div> 
 +    <div>12</div> 
 +  </div> 
 + 
 +</body>
 </code>   </code>  
-\\   +===== Example ===== 
-====align-content: flex-end 예제==== +''flex-end''값은 컨테이너의 끝 부분에서 플렉스 라인들을 표시합니다.\\ 
-''flex-start''값은 컨테이너의 끝 부분에서 플렉스 라인들을 표시합니다.\\+{{:wiki:css:css_note:align-content-flex-end.png?400|}}\\
 <code css> <code css>
-.flex-container { +  <style> 
-  display: flex; +    .flex-container { 
-  height: 600px; +      display: flex; 
-  flex-wrap: wrap; +      height: 600px; 
-  align-content: flex-end; +      flex-wrap: wrap; 
-}+      align-content: flex-end; 
 +      background-color: dodgerblue; 
 +    } 
 + 
 +    .flex-container > div { 
 +      background-color: #f1f1f1; 
 +      width: 100px; 
 +      margin: 10px; 
 +      text-align: center; 
 +      line-height: 75px; 
 +      font-size: 30px; 
 +    } 
 +  </style> 
 +</head> 
 +<body> 
 + 
 +  <h1>The align-content Property</h1> 
 + 
 +  <p>The "align-content: flex-end;" displays the flex lines 
 +    at the end of the container.</p> 
 +   
 +  <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>9</div> 
 +    <div>10</div> 
 +    <div>11</div> 
 +    <div>12</div> 
 +  </div> 
 + 
 +</body>
 </code>   </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                                                                  ^ ^ Property         ^ Description                                                                  ^
 | align-center     | flex-wrap 속성의 작용을 수정합니다. align-items와 유사하지만 플렉스 아이템을 정렬하는 대신 플레스 라인을 정렬합니다.  | | align-center     | flex-wrap 속성의 작용을 수정합니다. align-items와 유사하지만 플렉스 아이템을 정렬하는 대신 플레스 라인을 정렬합니다.  |
 | align-items      | 아이템들이 교차축에서 이용할 수 있는 모든 공간을 사용하지 않는 경우 플렉스 아이템을 수직으로 정렬합니다.                  | | align-items      | 아이템들이 교차축에서 이용할 수 있는 모든 공간을 사용하지 않는 경우 플렉스 아이템을 수직으로 정렬합니다.                  |
-| display          | HTML 요소에 사용된 박스 타입을 지정합니다.                                                   |+| display          | %%HTML%% 요소에 사용된 박스 타입을 지정합니다.                                               |
 | flex-direction   | 플렉스 컨테이너 내부의 플렉스 아이템의 방향을 지정합니다.                                             | | flex-direction   | 플렉스 컨테이너 내부의 플렉스 아이템의 방향을 지정합니다.                                             |
 | flex-flow        | flex-direction과 flex-wrap에 대한 단축 속성                                          | | flex-flow        | flex-direction과 flex-wrap에 대한 단축 속성                                          |
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_flex_container.1625471036.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