somoim ํ๋ก์ ํธ๋ฅผ ์ค๋๋ง์ ์ก์์ ๋๊ธ api๋ฅผ ๋ฌ๊ณ ์๋ ์ค์ ๋ชจ์ ์์ธ ํ์ด์ง์ css์ ์ด์ธ๋ฆฌ๊ฒ ๋๊ธ ์ปจํ
์ด๋๋ฅผ ๋ฃ์ผ๋ ค๊ณ ํ๋ค.
๋๊ธ ์ปจํ
์ด๋๋ฅผ ๋ง๋ค์ด์ ๋๊ธ ์
๋ ฅ์นธ๊ณผ ๋๊ธ ๋ฆฌ์คํธ๋ก ๋๋์๋๋ฐ flex ๋ฐ์ค๋ก ์ด๋ฃจ์ด์ ธ ์์ด์ ๋๊ฐ๊ฐ ์ฐ๋ฌ์ ์์ผ๋ก ๋ถ์ด์์๋ค. ์
๋ ฅ์นธ์ด 100%์ ๋๋น๋ฅผ ๊ฐ๊ณ ๊ทธ ์๋๋ก ๋๊ธ ๋ฆฌ์คํธ์ ๋๋น๋ฅผ 100%๋ก ์๋ ์์ด๊ฒ ํ๊ณ ์ถ์๋๋ฐ input ํ๊ทธ์ display: block, width: 100%์ ์ง์ ํด์ฃผ๋ฉด ๋ ๊ฑฐ๋ผ๊ณ ์๊ฐํ๋๋ฐ ์ ์ฉ๋์ง ์์๋ค.
ย
์คํ์ค๋ฒํ๋ก์ฐ์์ ์ฐพ์๋ณด๋ ๋๊ธ ์ปจํ
์ด๋์ ์คํ์ผ์ flex-wrap: wrap; ์ ์ค์ผ ํ๋ค.
๊ทธ ๋ค์ ๋๊ธ ์
๋ ฅ์นธ, ๋๊ธ ๋ฆฌ์คํธ ๊ฐ๊ฐ์ flex: 0 0 100%;๋ฅผ ์ฃผ๋ ๋ฐฉ๋ฒ๊ณผ width: 100%;๋ฅผ ์ฃผ๋ ๋ฐฉ๋ฒ์ด ์์๋ค.
flex-wrap ์์ฑ์ ๋ํด ๋ชจ๋ฅธ๋ค๋ฉด ํด๊ฒฐํ ์ ์์์ ๊ฒ์ด๋ค. ๋ค์ ํ๋ฒ ์ ๋ฆฌํด์ผํ ํ์๊ฐ ์๋ค๊ณ ์๊ฐํ๋ค.
ย
.commentsContainer {
border: 1px solid rgb(220, 220, 244);
padding: 10px;
display: flex;
// flex-wrap: wrap;
}
(flex-wrap์ ์ ์ฃผ๊ณ flex-items์ width: 100%;๋ฅผ ์ค๋ ๊ฐ๊ฐ์ด ๋์ ๋ถ์ด์ ๋๋น๋ฅผ ๊ฐ์ง ๋ชปํ๊ณ ์๋ค.)
ย
.commentsContainer {
border: 1px solid rgb(220, 220, 244);
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.commentsEditor {
flex: 0 0 100%;
// width: 100%;
input {
}
}
.commentsList {
flex: 0 0 100%;
// width: 100%;
section {
padding: 0px;
background: black;
article {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 5px;
p {
word-break: keep-all;
}
}
}
}
flex: 0 0 100%;
width: 100%;
๋์ค ํ๋๋ฅผ ์ง์ ํด์ฃผ๋ฉด ๋๋น 100%๋ก ์์ด๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
flex-wrap
CSSย
flex-wrap
ย property๋ย flex-item
ย ์์๋ค์ด ๊ฐ์ ๋ก ํ์ค์ ๋ฐฐ์น๋๊ฒ ํ ๊ฒ์ธ์ง, ๋๋ ๊ฐ๋ฅํย ์์ญ ๋ด์์ ๋ฒ์ด๋์ง ์๊ณ ์ฌ๋ฌํ์ผ๋ก ๋๋์ด ํํ ํ ๊ฒ์ธ์ง ๊ฒฐ์ ํ๋ ์์ฑ์
๋๋ค. ๋ง์ฝ ์์ญ ๋ด์์ ๋ฒ์ด๋์ง ๋ชปํ๊ฒ ์ค์ ํ๋ค๋ฉด, ๋์์ ์์์ ๋ฐฉํฅ ์ถ์ ๊ฒฐ์ ํ ์ ์์ต๋๋ค.์ถ๊ฐ ์ ๋ณด:
flex-wrap
ย ์์ฑย ์ ์ด๊ธฐ ๊ฐ์ย nowrap
์
๋๋ค. ์ฆ, ๋ชจ๋ ํญ๋ชฉ์ด ํ ์ค์ ์ ๋ ฌ๋ฉ๋๋ค.ย MDNย