| μΌ | μ | ν | μ | λͺ© | κΈ | ν |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- νλ‘ νΈμλ
- λ°±μ€
- μκ³ λ¦¬μ¦
- μ½λ©μ ν
- HTML
- node.js
- νλ‘μ νΈ
- react
- μ½λ©ν μ€νΈ
- λλ¦Όμ½λ©
- Python
- mongodb
- κ΅λΉμ§μ
- fe
- error
- λͺ¨κ°μ½
- λ Έλ§λμ½λ
- ν¬λ‘€λ§
- KDT
- Til
- ν μ΄νλ‘μ νΈ
- μ½λ©
- JS
- heapq
- κ°λ°
- CSS
- νλ‘κ·Έλλ¨Έμ€
- javascript
- 그리λ
- νμ΄μ¬
- Today
- Total
π± → π³
[CSS] Flexbox λ³Έλ¬Έ
Container
container μμ±κ°λ€
display
flex-direction
flex-wrap
flex-flow
justify-content
- flex-start: μμλ€μ 컨ν μ΄λμ μΌμͺ½μΌλ‘ μ λ ¬
- flex-end: μμλ€μ 컨ν μ΄λμ μ€λ₯Έμͺ½μΌλ‘ μ λ ¬
- center: μμλ€μ 컨ν μ΄λμ κ°μ΄λ°λ‘ μ λ ¬
- space-between: μμλ€ μ¬μ΄μ λμΌν κ°κ²©μ λ
- space-around: μμλ€ μ£Όμμ λμΌν κ°κ²©μ λ
align-items
align-content
Item
item μμ± κ°λ€
order: item μμ
flex-grow : κ³ μ ν μ¬μ΄μ¦ μ μ§(0), λ°μ€μ λ§λλ‘ λ³κ²½(1)
flex-shrink: container size μμμ§ λ μ΄λ»κ² μμμ§μ§ μ€μ
flex-basis: itemμ΄ λ€λ₯Έ itemμ λΉν΄ μΌλ§λ μ°¨μ§ν μ§ %λ‘ μ€μ
align-self: containerμ align μ€μ κ°μμ λ²μ΄λ λ³ΈμΈμ μ리 μ€μ κ°λ₯
Resources
Flexbox Froggy κ²μ: https://flexboxfroggy.com/
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
https://material.io/resources/color/#!/?view.left=0&view.right=0
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
https://developer.mozilla.org/en-US/docs/Web/CSS/float
float - CSS: Cascading Style Sheets | MDN
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to abs
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of
developer.mozilla.org
'Client > HTML CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [HTML] Span Tag (0) | 2022.06.21 |
|---|---|
| [HTML] HTML ꡬ쑰 (0) | 2022.06.19 |
| [CSS] λ μ΄μμ μ 리 display, position μμ± (0) | 2022.05.10 |
| [HTML/CSS] λλ¦Όμ½λ© κ°μ μ 리 (0) | 2022.05.09 |
| λͺ¨κ°μ½ HTML/CSS μ¬ν 2μΌμ°¨ (0) | 2022.04.11 |
