flex에서 유연한 레이아웃을 가능하게 하는 가장 중요한 두가지 속성이 있다.
flex-grow와 flex-shrink이다.
두 속성은 flex-basis속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나 줄어들도록 행 안에서 적절한 너비로 배치 되도록 맞춰준다.
flex-grow 속성을 지정해 주지 않거나 값이 0인 경우 레이아웃의 너비보다 아이템들의 너비합이 작들 경우 기본적으로 아이템 오른쪽 끝네 여백이 남게된다.
flex-shrink는 부족하면 공간을 줄이겠다는 의미.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step05_example.html</title>
<style>
.main-nav{
background: orangered;
color: white;
/*
root 요소(html) 의 글자 크기를 1rem 이라고 한다.
글자 크기를 지정하지 않으면 글자 크기는 기본 16px로 설정되기 때문에
1rem 은 16px 이 된다.
*/
padding: 1rem;
border-radius: 5px;
}
.main-nav > ul{
/* ul 의 기본 스타일 제거 */
list-style-type: none;
padding: 0;
margin: 0;
/* ul 의 자식요소를 가로로 배치하기 위해 */
display: flex;
column-gap: 1rem;
}
/* .main-nav li{
margin-right: 1rem;
} */
.main-nav li a{
/* a 요소의 밑줄 제거 */
text-decoration: none;
color: white;
}
.main-nav li a:hover{
text-decoration: underline;
}
/*
반응형 레이아웃
device 의 폭이 최대 575px일때 까지만 적용 할 css
*/
@media(max-width: 575px){
.main-nav ul{
flex-direction: column;
}
}
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li><a href="#">Logo</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Study</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</body>
</html>
'수업내용' 카테고리의 다른 글
| 20230721 CSS3 Flex (0) | 2023.07.21 |
|---|---|
| 20230720 Android CustomAdapter (0) | 2023.07.20 |
| 20230719 Andoroid (0) | 2023.07.19 |
| 20230719 flex (0) | 2023.07.19 |
| 20230718 Poligon 응용해보기 (0) | 2023.07.18 |
댓글