728x90
반응형
01 자식 요소의 순서를 지정하자
html 마크업
css편집
●order: 나열되어있는 자식들에게 order로 순서값을 변경해 줄 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 요소의 순서를 지정하자</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
background-color: lightblue;
/* 자식을 옆으로 나열해줌, 높이값이 살아있음 */
display: flex;
}
section article{
width: 100px;
height: 100px;
background-color: aqua;
font-size: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
section article:nth-of-type(1){
order: 2;
}
section article:nth-of-type(2){
order: 3;
}
section article:nth-of-type(3){
order: 1;
}
</style>
</head>
<body>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
</section>
</body>
</html>02 요소의 안쪽 여백 확대하기
●flex-grow:1; 모든 article이 똑같은 사이즈로 넓이값이 지정됨
article 중 하나만 2를 넣었을 때
●flex-grow:2;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소의 안쪽 여백 확대하기</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
background-color: lightblue;
/* article 옆으로 나열 */
display: flex;
}
section article{
background-color: aqua;
border: 1px solid #000;
font-size: 50px;
}
section article:nth-of-type(1){
flex-grow: 1;
}
section article:nth-of-type(2){
flex-grow: 2;
}
section article:nth-of-type(3){
flex-grow: 1;
}
</style>
</head>
<body>
<section>
<article>FLEX GROW_1</article>
<article>FLEX GROW_2</article>
<article>FLEX GROW_3</article>
</section>
</body>
</html>03 요소의 안쪽 여백을 축소하기
●flex-shrink: 여백을 축소한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소의 안쪽 여백을 축소하기</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
background-color: lightblue;
/* article 옆으로 나열 */
display: flex;
}
section article{
background-color: aqua;
border: 1px solid #000;
font-size: 40px;
width: 400px;
box-sizing: border-box;
display: flex;
}
section article:nth-of-type(1){
flex-shrink: 1;
}
section article:nth-of-type(2){
flex-shrink: 2;
}
section article:nth-of-type(3){
flex-shrink: 3;
}
</style>
</head>
<body>
<section>
<article>FLEX shrink</article>
<article>FLEX shrink</article>
<article>FLEX shrink</article>
</section>
</body>
</html>728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 55_ parallax04 (0) | 2023.06.29 |
|---|---|
| [JAVASCRIPT]5.클래스 제어하기 (0) | 2023.06.29 |
| 비주얼 스튜디오 코드 53_parallax03 (2) | 2023.06.28 |
| 비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기 (0) | 2023.06.28 |
| 비주얼 스튜디오 코드 51_ 햄버거 메뉴 (0) | 2023.06.27 |