-
๐จ CSS 4 | Flexbox (with ๋๋ฆผ์ฝ๋ by ์จ๋ฆฌ) 2ํCSS 2022. 9. 5. 23:25
Step 4: Flexbox ์์์๊ฒ ์ค ์ ์๋ ์์ฑ๋ค (item)
HTML ๋ฌธ์ ์์ฑ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex-itemํธ</title> </head> <body> <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div> </body> </html>
CSS ์์ฑ
.container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); } .item2 { background-color: rgb(250, 134, 153); } .item3 { background-color: rgb(165, 100, 250); }
- order
default ๊ฐ : 0;
์์ ์์๋ก ์ง์ ํ๊ธฐ
.container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); order : 2; } .item2 { background-color: rgb(250, 134, 153); order : 1; } .item3 { background-color: rgb(165, 100, 250); order : 3; }
- flex-grow
default ๊ฐ : 0; ์์ ์ ๊ณ ์ ํ ์ฌ์ด์ฆ ์ ์ง
flex-grow ๊ฐ ์ง์ ํ๊ธฐ : ํ๋ฉด์ด ์ปค์ง ๋ ํด๋น ๋น์จ๋งํผ ๋์ด๋จ
.container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); flex-grow : 1; } .item2 { background-color: rgb(250, 134, 153); flex-grow : 2; } .item3 { background-color: rgb(165, 100, 250); flex-grow : 3; }
- flex-shrink
default ๊ฐ : 0; ์์ ์ ๊ณ ์ ํ ์ฌ์ด์ฆ ์ ์ง
flex-shrink๊ฐ ์ง์ ํ๊ธฐ : ํ๋ฉด์ด ์ค์ด๋ค๋ฉด์ ํด๋น ๋น์จ๋งํผ ์ค์ด๋ฆ
.container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); flex-grow : 1; flex-shrink : 1; } .item2 { background-color: rgb(250, 134, 153); flex-grow : 2; flex-shrink : 1; } .item3 { background-color: rgb(165, 100, 250); flex-grow : 3; flex-shrink : 1; }
ํ๋ฉด์ด ์ปค์ง ๋ (flex-grow ๋น์จ๋ก)
ํ๋ฉด ํฌ๊ธฐ๊ฐ ์ค์ด๋ค ๋ (flex-shrink ๋น์จ๋ก)
- flex-basis
default ๊ฐ : auto; flex-grow, flex-shrink ์ ๋ง๊ฒ
flex-basis ๊ฐ ์ง์ ํ๊ธฐ : flex-grow, flex-shrink๊ฐ ์์ ๊ฒฝ์ฐ, flex-basis ์ ์ง์ ๋ ๋น์จ๋งํผ ์ฐจ์ง.
.container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); flex-basis: 60%; } .item2 { background-color: rgb(250, 134, 153); flex-basis: 30%; } .item3 { background-color: rgb(165, 100, 250); flex-basis: 10%; }
-align-self
default ๊ฐ : auto;
align-self : ์์ดํ ๋ณ๋ก ์์ดํ ์ align ์ง์
.container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); flex-basis: 60%; align-items : center; } .item2 { background-color: rgb(250, 134, 153); flex-basis: 30%; } .item3 { background-color: rgb(165, 100, 250); flex-basis: 10%; }
๋จ์ถํ
flex : 2 2 auto /*grow, shrink, basis*/
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
'CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๐จ CSS 6 | ๊ทธ๋ฆฌ๋(with ๋๋ฆผ์ฝ๋ by ์จ๋ฆฌ) 2ํ (0) 2022.09.09 ๐จ CSS 5 | ๊ทธ๋ฆฌ๋(with ๋๋ฆผ์ฝ๋ by ์จ๋ฆฌ) 1ํ (0) 2022.09.09 ๐จ CSS 3 | CSS ๋จ์ ( %, em, rem, vw, vh ) (0) 2021.12.17 ๐จ CSS 2 | Flexbox (with ๋๋ฆผ์ฝ๋ by ์จ๋ฆฌ) 1ํ (0) 2021.12.17 ๐จ CSS 1 | CSS layout (display, position) (0) 2021.12.16