[HTML5 & CSS3] 플렉스 박스 항목 배치를 위한 속성들

▶ 플렉스 박스 항목 배치를 위한 속성들

플렉스 박스 레이아웃에는 여러 플렉스 항목들이 있는데 일괄적으로 한꺼번에 배치하거나 주축이나 교차축을 기준으로 다양하게 배치할 수 있다.

*justify-content 속성 - 주축 기준의 배치 방법 지정하기

justify-content 속성을 이용하면 플렉스 항목을 주축 방향으로 배치할 때의 배치 기준을 지정할 수 있다.

기본형)

justify-content : flex-start | flex-end | center | space-between | space-around

*align-items 속성, align-self 속성 - 교차축 기준의 배치 방법 지정하기

align-items 속성과 align-self 속성을 이용하면 주축뿐만 아니라 교차축을 기준으로 배치 방법을 조절할 수 있다.

기본형)

align-items : stretch | flex-start | flex-end | center | baseline

*align-content 속성 - 여러 줄일 때의 배치 방법 지정하기

플렉스 항목이 여러 줄에 걸쳐 표시될 때 align-content 속성을 사용하면 교차축 방향의 배치 방법을 지정할 수 있따.

기본형)

align-content : flex-start | flex-end | center | space-between | space-around

직접 해보세요! ) 플렉스 박스 이용해 사이트 구성하기

<HTML>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>솔로의 식탁</title>
<link rel="stylesheet" href="css/style-result.css">
</head>
<body>
<div id="container">
<header>
<h1>솔로의 식탁</h1>
</header>
<section id="menus">
<div id="menu1">
<h2>밥/죽</h2>
</div>
<div id="menu2">
<h2>국/찌개</h2>
</div>
<div id="menu3">
<h2>반찬</h2>
</div>
<div id="menu4">
<h2>일품요리</h2>
</div>
<div id="menu5">
<h2>음료/칵테일</h2>
</div>
</section>
<section id="notice">

</section>
<footer>
<p>솔로의 식탁</p>
</footer>
</div>
</body>
</html>

<CSS>

* {
   margin:0;
   padding:0;
   box-sizing:border-box;
}
#container {
   width:100%;
}
header {
   width:100%;
}
header h1 {
   font-size:3em;
   text-align: center;
}
#menus {
   width:100%;
}
#menus > div {
   position:relative;
   height:400px;
   border:1px solid black;
   margin-bottom:15px;
}
#menu1, #menu2, #menu3, #menu4, #menu5 {
   width:100%;
}
#menus h2 {
   position:absolute;
   padding:5px;
   font-size:2em;
   color:white;
   text-shadow:3px 3px 5px black;
   right:3%;
   bottom:10px;
}
#menu1 {
   background:url("../images/dish1.jpg") no-repeat center;
   background-size:cover;
}
#menu2 {
   background:url("../images/dish2.jpg") no-repeat center;
   background-size:cover;
}
#menu3 {
   background:url("../images/dish3.jpg") no-repeat center;
   background-size:cover;
}
#menu4 {
   background:url("../images/dish4.jpg") no-repeat center;
   background-size:cover;
}
#menu5 {
   background:url("../images/dish5.jpg") no-repeat center;
   background-size:cover;
}
footer {
   width:100%;
   background:#373737;
   height:200px;
}
footer p {
   font-size:1.2em;
   color:#eee;
   text-align:center;
   line-height:200px;
}

@media all and (min-width:768px) { /* 태블릿 화면 크기 */
   #menus {
      display: flex; /* 플렉서블 박스 레이아웃 적용 */
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; /* 여러 줄에 걸쳐 표시 */
      justify-content: space-between; /* 화면 양쪽에 바짝 붙이기 */
   }
   #menu1, #menu2, #menu3, #menu4 { /* 한 줄에 두 개씩 표시 */
      width: 49%;
   }
   #menu5 { /* 한 줄에 하나만 표시 */
      width: 100%;
   }
}

@media all and (min-width:992px) { /* PC 화면 크기 */
   #menu1, #menu2, #menu3, #menu4, #menu5 { /* 사이트 제목 아래 3개의 플렉스 항목 표시 */
      width:33%;
   }
   #menu5 { /* 두 번째 줄에는 2개의 항목을 표시하는데 마지막 항목은 다른 항목의 2배 크기로 늘임 */
      margin-left: 0.5%;
      -ms-flex: 2 2 0;
      -webkit-flex: 2 2 0;
      flex: 2 2 0;
   }
}

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[HTML5 & CSS3] 실습 - 고양이 분양 페이지 만들기 (0)	2021.02.15
[HTML5 & CSS3] 과제 (0)	2021.02.15
[HTML5 & CSS3] 플렉스 박스 레이아웃 (0)	2021.02.14
[HTML5 & CSS3] 미디어 쿼리를 사용해 웹 문서 만들기 (0)	2021.02.14
[HTML5 & CSS3] 미디어 쿼리 이해하기 (미완성) (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 플렉스 박스 항목 배치를 위한 속성들

▶ 플렉스 박스 항목 배치를 위한 속성들

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 플렉스 박스 항목 배치를 위한 속성들

▶ 플렉스 박스 항목 배치를 위한 속성들

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바