π‘ νμ΅ λͺ©ν
- Flex μμ΄ν
μ μμ±μ μ΄ν΄νκ³ μ¬μ©ν μ μλ€.
- Flexbox λ μ΄μμμμ κ° μμ΄ν
μ μμ, ν¬κΈ° λ° μ λ ¬μ μ μ΄ν μ μλ€.
- order, flex-grow, flex-shrink, flex-basis, flex, align-self μμ±μ μ¬μ© λͺ©μ κ³Ό μν©μ νμ
ν μ μλ€.
Flex μμ΄ν μμ± μ¬μ© λͺ©μ
order
μμ΄ν
μ νμ μμλ₯Ό μ μ΄νμ¬ μ€μλμ λ°λΌ λ°°μΉ μμλ₯Ό λ³κ²½νκΈ° μν΄ μ¬μ©ν©λλ€.
μ¦, μ€μλμ λ°λΌ μμλ₯Ό λ³κ²½νκ±°λ νΉμ μμ΄ν
μ 맨 μμ΄λ 맨 λ€μ λ°°μΉν λ μ¬μ©ν μ μμ΅λλ€.
flex-grow: Flex
컨ν μ΄λ λ΄μ λ¨μ 곡κ°μ μμ΄ν λ€μ΄ λΉμ¨μ λ§κ² μ°¨μ§νλλ‘ νκΈ° μν΄ μ¬μ©ν©λλ€.
λλ μ¬λ¬ μμ΄ν μ΄ μκ³ , νΉμ μμ΄ν μ΄ λ λ§μ 곡κ°μ μ°¨μ§ν΄μΌ ν λ μ¬μ©ν μλ μμ΅λλ€.
flex-shrink
곡κ°μ΄ λΆμ‘±ν λ μμ΄ν μ΄ μΌλ§λ μ€μ΄λ€μ§λ₯Ό κ²°μ νμ¬ λ°μν λμμΈμμ λ μ΄μμμ μ μ§νκΈ° μν΄ μ¬μ©ν©λλ€.
flex-basis
μμ΄ν μ κΈ°λ³Έ ν¬κΈ°λ₯Ό μ€μ νμ¬ μ΄κΈ° ν¬κΈ°λ₯Ό μ§μ νκ³ λλ¨Έμ§ κ³΅κ°μ flex-growμ flex-shrinkλ‘ μ‘°μ νκΈ° μν΄ μ¬μ©ν©λλ€. μ¦, μμ΄ν μ μ΄κΈ° ν¬κΈ°λ₯Ό μ€μ νκ³ , λλ¨Έμ§ κ³΅κ°μ flex-growμ flex-shrinkλ‘ μ‘°μ νκ³ μΆμ λ.
flex (λ¨μΆ μμ±)
flex-grow, flex-shrink, flex-basisλ₯Ό ν λ²μ μ€μ νμ¬ μ½λ κ°κ²°νμ ν¨μ¨μ±μ λμ΄κΈ° μν΄ μ¬μ©ν©λλ€.
ex) padding : 10px 20px 30px 40px; (μκ³λ°©ν₯) {μΌ, μ, μ€, λ°} {λ¨μΆ μμ±}
.item {
flex: 1 1 200px;
}
μλλ¦¬μ€ μ½λ 1
class_flexbox_03 ν΄λ μμ±
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
display: flex;
flex-wrap: wrap;
border: 2px solid #333;
padding: 10px;
background-color: #f9f9f9;
}
.item {
/* width: calc(33.333% -10px); */ /* μμ΄ν
ν¬κΈ° μ‘°μ */ /* flex-grow μμ± νλ©΄μ μ£Όμμ²λ¦¬ ν¨ */
/* flex-basisμμ μμ± μ£Όμμ²λ¦¬ */ /*flex-shrink μμ± μ£Όμμ²λ¦¬ ν΄μ */
background-color: brown;
color: white;
margin: 5px;
padding: 20px;
text-align: center;
border-radius: 5px;
}
.order-1{
order: 1; /* μμλ₯Ό μ§μ ν μ μλ€. */
}
.order-2{
order: 2;
}
/* μ§μ νμ§ μμΌλ©΄ λ μ°μ μμλ₯Ό κ°μ§λ€. */
.order-3{
order: 3;
}
/* flex-grow μμ±μ νΉμ flex μμ΄ν
μ΄ λ λ§μ 곡κ°μ μ°¨μ§ν΄μΌ ν λ μ¬μ© */
.grow-1 {
flex-grow: 1;
}
/* flex-shrink μμ±μ (곡κ°μ΄ λΆμ‘±ν λ μΌλ§λ μ€μ΄λ€μ§λ₯Ό κ²°μ )
νΉμ μμ΄ν
μ΄ μ€μ΄λ€λ©΄μ λ€λ₯Έ μμ΄ν
κ³Ό κ· νμ λ§μΆμ΄μΌ ν λ νμ©λλ€.
*/
.shrink-1 {
flex-shrink: 1;
}
.basis-100 {
flex-basis: 300px;
}
/* flex(λ¨μΆ μμ±) - flex-grow, flex-shrink, flex-basisλ₯Ό νλ²μ μ€μ νλ μμ±μ΄λ€. */
.flex-combined{
flex: 1 1 300px;
}
</style>
</head>
<body>
<%--
JSP : HTML + JAVA κΈ°μ --> μ»΄νμΌ κ³Όμ μ κ±°μ³μΌ νλ€. (μΉ μλ²λ μ»΄νμΌ μλλ€.(μ μ λ§ κ°λ₯))
http://localhost:8080/flex/index.jsp
http://localhost:8080/flex <-- root νμΌμ μκΈ°μ μ΄λ κ² μ¨λ λλ€.
--%>
<h2>order μμ±</h2>
<div class="container">
<div class="item order-2">μμ΄ν
1</div>
<div class="item order-1">μμ΄ν
2</div>
<div class="item order-3">μμ΄ν
3</div>
</div>
<h2>flex-grow μμ±</h2>
<div class="container">
<div class="item grow-1">μμ΄ν
1</div>
<div class="item">μμ΄ν
2</div>
<div class="item">μμ΄ν
3</div>
</div>
<h2>flex-shrink μμ±</h2>
<div class="container" style="width: 550px;">
<div class="item shrink-1">μμ΄ν
1 (flex-shrink : 1)</div>
<div class="item">μμ΄ν
2 (flex-shrink : 0)</div>
<div class="item">μμ΄ν
3 (flex-shrink : 0)</div>
</div>
<h2>flex-basis μμ±</h2>
<div class="container">
<div class="item basis-100">μμ΄ν
1 (flex-basis : 100px)</div>
<div class="item">μμ΄ν
2</div>
<div class="item">μμ΄ν
3</div>
</div>
<h2>flex-λ¨μΆ μμ±</h2>
<div class="container">
<div class="item flex-combined">μμ΄ν
1</div>
<div class="item flex-combined">μμ΄ν
2</div>
<div class="item flex-combined">μμ΄ν
3</div>
</div>
</body>
</html>