<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
margin: 10px auto;
padding: 10px;
border: 1px solid #ccc;
width: 80%;
justify-content: space-around;
}
.item{
background-color: lightcoral;
padding: 20px;
margin: 5px;
border: 1px solid #000;
text-align: center;
min-width: 50px;
}
.example1{
flex-direction: row;
}
.example2{
flex-direction: column-reverse;
}
.example3{
flex-direction: row;
flex-wrap:wrap-reverse;
/* flex-wrap: wrap; */
flex-wrap: wrap;/*기본값*/
}
.example4{
flex-flow: row;
flex-wrap: wrap-reverse;
}
</style>
</head>
<body>
<h1>Flexbox</h1>
<section>
<h2>1. 기본 Flex 구조</h2>
<div class="container example1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>2. Flex Direction(주축/ 교차축 변경)</h2>
<div class="container example2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>3. Flex Wrap(아이템 래핑)</h2>
<div class="container example3">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<h2>4. Flex Flow(아이템 정렬 & 래핑 동시 지정 -단축 속성)</h2>
<div class="container example4">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</section>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS 활용예시(flex03★) (0) | 2024.07.29 |
|---|---|
| CSS 활용예시(flex02★) (0) | 2024.07.29 |
| HTML, CSS 연습 문제 (0) | 2024.07.29 |
| CSS활용예시(background) (0) | 2024.07.29 |
| CSS 활용예시(position) (0) | 2024.07.29 |