[flex-box] justify-content

๐Ÿ“„ justify-contentPermalink

ํ”Œ๋ ‰์Šค์•„์ดํ…œ๋“ค์ด ํ”Œ๋ ‰์Šค๋ฐ•์Šค ์ฃผ์ถ•์„ ๋”ฐ๋ผ ๋ฐฐ์น˜๋  ๋•Œ,

์š”์†Œ ์‚ฌ์ด์˜ ๊ณต๊ฐ„์„ ๋ถ„๋ฐฐํ•˜๋Š” ๋ฐฉ์‹์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.

justify-content: flex-start; /* ๊ธฐ๋ณธ๊ฐ’*/
justify-content: flex-end; /*์ˆœ์„œ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•œ์ฑ„ ๋’ค๋กœ ๋ถ™์Œ. ๋ฆฌ๋ฒ„์Šค๊ฐ€ ์•„๋‹˜.*/
justify-self: center; /*๊ฐ€์šด๋ฐ ์ •๋ ฌ*/
justify-content: space-around; /*์š”์†Œ๋“ค์ด ๋™์ผํ•œ ์—ฌ๋ฐฑ์„ ๊ฐ€์ง„๋‹ค.*/
justify-content: space-between; /*์–‘๋์— ์—ฌ๋ฐฑ ์—†์ด ์š”์†Œ๋“ค์„ ๋™์ผํ•œ ๊ฐ„๊ฒฉ์œผ๋กœ ํŽผ์นœ๋‹ค.*/
justify-content: space-evenly; /*ํ”Œ๋ ‰์Šค ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์š”์†Œ ์‚ฌ์ด์— ๋™์ผํ•œ ์—ฌ๋ฐฑ์„ ๋งŒ๋“ ๋‹ค.*/

์ถœ์ฒ˜Permalink

  • ์œ ๋…ธ์ฝ”๋”ฉ

Leave a comment