4. 플렉서블 박스 (2)
페이지 정보
작성자 관리자 댓글 0건 조회 463회 작성일 22-01-13 11:53본문
4. 플렉서블 박스 (2)
실습 : flexibleBox5.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flexbox{
background: #003f54;
width:200px;
height: 300px;
border-radius: 15px;
display: flex;
flex-wrap: wrap;
}
#stretch{
align-content:stretch;
}
#space_between{
align-content:space-between;
}
#space_around{
align-content: space-around;
}
.item{
background: #00fa00;
border-radius: 10px;
width: 80px;
margin: 10px;
font-size: 26px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h2>align-content 속성을 이용한 분포 설정</h2>
<h4>align-content 속성값이 stretch 인경우</h4>
<div id="stretch" class="flexbox">
<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>
<h4>align-content 속성값이 space-between 인경우</h4>
<div id="space_between" class="flexbox">
<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>
<h4>align-content 속성값이 space-around 인경우</h4>
<div id="space_around" class="flexbox">
<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>
</body>
</html>
실습 : flexibleBox6.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flexbox{
background: #003f54;
width:200px;
height: 300px;
border-radius: 15px;
display: flex;
flex-wrap: wrap;
}
#flex_start{
align-content: flex-start;
}
#flex_end{
align-content: flex-end;
}
#center{
align-content: center;
}
.item{
background: #00fa00;
border-radius: 10px;
width: 80px;
height:50px;
margin: 10px;
font-size: 26px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h2>align-content 속성을 이용한 분포 설정</h2>
<h4>align-content 속성값이 flex-start 인경우</h4>
<div id="flex_start" class="flexbox">
<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>
<h4>align-content 속성값이 flex-end 인경우</h4>
<div id="center" class="flexbox">
<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>
<h4>align-content 속성값이 flex-end 인경우</h4>
<div id="flex_end" class="flexbox">
<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>
</body>
</html>
[ order ] 속성
플렉스 아이템의 순서를 설정한다.
플렉스 아이템(flex item)의 [ margin ] 속성
auto : 수평 방향의 여유 공간을 없앨 수 있다.
이속성을 이용하면 플렉스아이템들을 서로 반대 방향으로 밀어내 배치시킬 수 있다.
실습 : flexibleBox9.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flexbox{
background: #003f54;
width:400px;
height: 250px;
margin: 10px 0;
border-radius: 15px;
display: flex;
flex-wrap: wrap;
}
.item{
background: #00fa00;
border-radius: 10px;
width: 80px;
height:50px;
margin: 10px;
font-size: 26px;
text-align: center;
line-height: 50px;
margin: auto;
}
</style>
</head>
<body>
<h2>margin 속성을 이용한 플렉스아이템을 중앙에 정렬</h2>
<div class="flexbox" id="second">
<div class="item">1</div>
</div>
</body>
</html>
플렉스아이템의 [align-self] 속성
이 속성을 이용하면 플렉스 아이템마다 서로 다른 align 속성값을 설정할 수 있다.
플렉스아이템의 [flex] 속성
이 속성을 이용하면 컨테이너 안에 있는 플렉스 아이템의 너비를 상대적으로 설정할 수 있다.
댓글목록
등록된 댓글이 없습니다.