μ€λμ μ½λμ€ν μ΄μΈ ν리 μ½μ€ 15μΌμ°¨
μ€λλΆν° html, css ννΈ μμ.css flexbox, grid 볡μ΅μ΄ νμνλ€. (μ μ°λκΉ λ€ κΉλ¨Ήλλ€...)
flex-shrink, flex-grow, flex-basis λ€μ μ 리ν΄λ³΄κΈ°.
flex-directionμ λ°λ₯Έ align-items, justify-content base μΆ μλ²½ν μμ§νκΈ°.μλ©ν± νκ·Έλ νλ² λ€μ μ λ³Ό νμκ° μμ΄ λ³΄μ΄κ³ λ΄μΌμ 그리λ λ΄μΌμ§.
μ€λλ§μ λ§ν¬μ ν΄λ³΄λκΉ κ·Έλλ μ¬λ―Έκ° μλλΌ.
index.html
<div class="flex-container container1">
<div class="flex-item">box1</div>
<div class="flex-item">box2</div>
<div class="flex-item">box3</div>
</div>
style.css
.flex-container {
display: flex;
margin-bottom: 100px;
}
.flex-item {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
}
.container1 {
justify-content: space-around;
height: 100vh;
}
.container1 .flex-item:nth-of-type(1) {
align-self: center;
}
.flex-item:nth-of-type(1) {
background: lightpink;
flex-grow: 2;
flex-shrink: 2;
}
.flex-item:nth-of-type(2) {
background: dodgerblue;
flex-grow: 1;
flex-shrink: 2;
}
.flex-item:nth-of-type(3) {
background: lightcoral;
flex-grow: 1;
flex-shrink: 2;
}
.flex-item:nth-of-type(4) {
background: lightgrey;
flex-grow: 0;
flex-shrink: 2;
}
index.html
<div class="flex-container container2">
<div class="flex-item">box1</div>
<div class="flex-item">box2</div>
<div class="flex-item">box3</div>
<div class="flex-item">box4</div>
</div>
style.css
.flex-container.container2 {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
align-content: space-between;
background: rgba(0, 0, 0, 0.2);
flex-wrap: wrap;
height: 60vh;
}