CSS/CSS 이론에따라 직접해보기
Flex
by 임혁진
2024. 1. 28.
<!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>
/*
1. 플렉스는 부모영역인 container , 배치되는 요소인 item으로 구분됩니다.
2. 각각 요소들에 사용할 수 있는 속성들이 있습니다.
*/
.box {
background-color: yellow;
}
.box .item {
background-color: green;
width: 50px;
height: 50px;
margin: 10px;
}
.container {
/*flex 부모박스가 블럭모형 , inline-flex 인라인형식의 배치*/
/* display:flex; */
display:inline-flex;
}
</style>
</head>
<body>
<div class="container box">
<div class="item">hello</div>
<div class="item">안녕하세요</div>
<div class="item">flex</div>
</div>
<div class="container box">
<div class="item">hello</div>
<div class="item">안녕하세요</div>
<div class="item">flex</div>
</div>
<hr/>
<style>
.container2{
display: flex;
/*
플렉스의 main-axis
주축이 row가 되면 , 반대축은 column이 됩니다.
주축이 column이 되면 반대축은 row가 됩니다.
*/
flex-direction: column;
}
</style>
<div class="container2 box">
<div class="item">hello</div>
<div class="item">안녕하세요</div>
<div class="item">flex</div>
</div>
<hr/>
<style>
.container3{
width: 300px;
display:flex;
/* flex-direction: row;*/
/*wrap - 여러줄로 나타낼 때 , nowrap - 한줄로 다 쓴다*/
/* flex-wrap: wrap; */
/*direction과 , wrap을 한번에 표현하는 속성*/
flex-flow:row wrap;
}
</style>
<div class="container3 box">
<div class="item">hello</div>
<div class="item">안녕하세요</div>
<div class="item">flex</div>
<div class="item">flex</div>
<div class="item">flex</div>
<div class="item">flex</div>
<div class="item">flex</div>
<div class="item">flex</div>
<div class="item">flex</div>
</div>
<hr>
<style>
.container4{
display: flex ;
/*justify-content = 주축정렬*/ /*즉 direction에 따라 갈린다 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
}
</style>
<div class="container4 box">
<div class="item">hello</div>
<div class="item">안녕하세요</div>
<div class="item">flex</div>
</div>
</body>
</html>
