나는 전형적인 웹 사이트 랜딩 페이지와 비교하여 다소 독창적 인 레이아웃을 필요로하는 새로운 앱을 시작하기 위해 나 스스로를 이용했다. 이 응용 프로그램은 다양한 요소에 걸쳐 다양한 위치, 주로 수직 위치를 필요로했습니다.
이 튜토리얼에서는 일반 레이아웃을 다시 만들고 CSS Flexbox에서 어떻게 작동하는지 보여줍니다.
프로젝트 시작하기
이 튜토리얼은 전적으로 CSS 튜토리얼이기 때문에, 불필요한 종소리와 호루라기가있는 강력한 개발 환경을 설정하는 것에 신경 쓰지는 않습니다. 대신, 우리는 단지 하나의 폴더에 2 개의 파일을 생성 할 것입니다.
기본 코드 편집기를 사용하여 index.html 이라는 파일을 만들고 다음 내용을 붙여 넣습니다.
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Flexbox Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
다음으로 같은 폴더에 style.css 를 만들고 지금은 비워 두겠습니다.
2 열 Flexbox 레이아웃 정의
우리의 레이아웃은 적어도 처음에는 2 개의 컬럼으로 구성 될 것입니다. 나는 이것을 위해 CSS 프레임 워크를 사용하지 않을 것이다. 대신, 우리는 모든 것을 단순하고 습관적으로 유지할 것입니다.
에 있는 index.html 파일, body 태그 내에서 다음을 추가합니다 :
<div class="sidebar">
</div>
<div class="content">
</div>우리의 style.css 파일에서 body 요소와 함께 다음 두 클래스를 모두 참조하겠습니다.
body {
margin:0;
font-family: Arial, Helvetica, sans-serif;
display:flex;
flex-direction: row;
}
.sidebar {
background:gray;
width: 15%;
padding:1em;
}
.content {
background:lightgray;
width: 85%;
}여기서는 기본 body 요소를 flexbox 컨테이너로 정의합니다 .
- 디스플레이 : 플렉스;
이것은 flexbox 컨테이너가됩니다. - 플렉스 방향 : 행;
이것은 본문 태그 내의 모든 자식을 의미하며, 열 ( 열 은 다른 값임) 과 달리 행에 있습니다 .
브라우저에서 index.html 을 방문 하면 비슷한 결과가 표시됩니다.
열의 높이가 브라우저 뷰포트를 채우는 것에 유의하십시오. 이 열 위에 수평 탐색 헤더를 추가하려면 어떻게해야할까요? 여전히 작동할까요? 원하지 않는 세로 스크롤링이 발생합니까? 해보자.
index.html 파일에 추가 :
<header>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="sidebar">
</div>
<div class="content">
</div>브라우저에서 결과는 다음과 같습니다.
우리가 원하는 것이 아니에요! 이것은 모든 어린이들을 한 줄로 모으는 신체 의 아이이기 때문에 발생 합니다.
이 문제를 해결하려면 HTML과 CSS를 약간 수정해야합니다.
index.html :
<header>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="wrapper">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
여기에서는 사이드 바 및 콘텐츠 클래스 주위에 래퍼 클래스를 추가했습니다 . 이렇게하면 flex 요소를 body 요소에서 래퍼 클래스 로 이동할 수 있습니다.
style.css :
body {
margin:0;
font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
display:flex;
flex-direction: row;
}
.sidebar {
background:gray;
width: 15%;
padding:1em;
}
.content {
background:lightgray;
width: 85%;
}
/* Menu styling */
ul {
list-style-type:none;
margin:0;padding:0;
display:flex;
flex-direction:row;
justify-content: flex-end;
}
ul li a {
padding: 20px;
display:block;
}브라우저를 저장하고 새로 고침 :
열이 더 이상 브라우저의 맨 아래로 확장되지 않는 이유는 무엇입니까? 래퍼 클래스 에서 높이를 정의해야합니다 . 따라서 래퍼 룰 세트 만 수정 하면 height 속성을 추가 할 수 있습니다.
.wrapper {
display:flex;
flex-direction: row;
height: 100vh; /* Add this */
}vh 는 뷰포트 높이 단위입니다. 브라우저 새로 고침 :
이제 원하지 않는 세로 스크롤 막대가 생깁니다. 이는 .wrapper 의 height 속성에서 header 요소 의 높이를 빼야하기 때문 입니다 .
.wrapper {
display:flex;
flex-direction: row;
height: calc(100vh - 60px);
}
/* Add this ruleset to define a height on the header /*
header {
height:60px;
}새로 고침 :
Flexbox를 사용한 수직 위치 지정
예를 들어이 앱이 채팅 앱이라고 가정 해 보겠습니다. 에서 .content 컨테이너, 우리는 채팅 메시지를 표시 할 요소를 추가하고, 항상 뷰포트의 하단에 정렬 맨 아래에서, 텍스트 입력을 갈 것입니다 싶다.
index.html을 수정합시다 :
<div class="content">
<div id="chat-container">
<div id="chat">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
<input type="text" placeholder="Chat here">
</div>
</div># chat-container 와 #chat 가있는 2 개의 div가 추가되었습니다 . 이 두 div는 chat-container의 자식이며 ,이 두 div를 올바르게 배치하는 데 필요한 요소입니다.
그대로, 결과는 다음과 같습니다.
못 생겼어, 그걸 수정하자. CSS 파일에 다음 3 가지 규칙 집합을 추가하십시오.
#chat-container {
flex-direction: column;
display:flex;
min-height: 100%;
color:gray;
}
#chat {
width:100%;
flex: 1;
overflow-y: scroll;
padding: 30px;
box-sizing: border-box;
}
input[type="text"] {
width: 100%;
padding: 10px;
}우리는 # chat-container 를 새로운 flex 컨테이너로 만들고, 이번에 는 flex-direction 을 column 으로 설정합니다 . 그것은 우리가 채팅 메시지를 세로로 쌓고 입력을하기 때문입니다.
그런 다음 #chat 를 참조 하고 flex : 1 의 속성을 지정합니다 . 즉, 모든 플렉스 아이템들이 같은 길이가되도록하십시오. 우리는 두 어린이 중 하나 ( 입력이 아님) 에만 적용 하기 때문에 전체 공간에서 입력 높이를 뺀 값을 사용합니다.
우리가 플렉스 를 추가한다면 : 1; 받는 사람 입력 룰, 우리가 원하지 않는 높이의 50 %를 동반한다.
위의 규칙 집합을 기반으로하는 브라우저의 결과입니다.
'개발 > CSS3' 카테고리의 다른 글
| Bulma CSS를 기반으로 Adobe XD를 사용하여 웹 응용 프로그램 디자인 (0) | 2018.03.11 |
|---|---|
| CSS 그리드 예제 배우기 (새로운 CSS 그리드 튜토리얼) (0) | 2018.03.11 |
| CSS Grid Positioning Tutorial (0) | 2018.03.11 |
| CSS 활용을위한 PostCSS 자습서 (0) | 2018.03.11 |