🌱 → 🌳

[CSS] Flexbox λ³Έλ¬Έ

Client/HTML CSS

[CSS] Flexbox

BAY 2022. 5. 10. 13:58
728x90

Container

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 μ‹€μŠ΅

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

 

728x90

'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
'Client/HTML CSS' Related Articles more