메쉬 및 Flexbox의 CSS 프레임워크 삭제
2000년부터 2010년까지 나는 CSS 해커들로 가득 찬 세계에서 발전했다.나는 부동, 내연 차단,clearfix로 레이아웃을 관리하는 데 익숙하다.몇 년 전에 나는 flexbox를 사용하는 것을 배워 보았지만, 그것이 처음 도입되었을 때, 대부분의 속성은 브라우저를 접두사로 하고 항상 한결같이 작동하지 않았다.그래서 나는 단지 포기하고 전단 개발을 한동안 내려놓고 일이 성숙되기를 기다렸을 뿐이다.
나는 Bootstrap, Foundation, Skeleton 등 내용의 캠프를 구독하여 고통을 피했다.이것은 내가 신속하게 응용 프로그램을 구축하고 신뢰할 수 있는 백엔드를 제공하는 안전한 항구이다.
내가 동료에게 다가가 무엇을 하고 있는지 물었을 때, 나의 흥미는 다시 불러일으켰다.그는 나에게 두 개의 CSS 강좌grid와 flex를 보여 주었고, 나에게 그들이 함께 무엇을 할 수 있는지를 신속하게 개념적으로 증명해 주었다. 나는 충격을 받았다.
나는 격자와 flexbox만 사용하여 CSS 프레임워크가 없는 페이지를 구축하기로 결정했다.나는 HTML 구조를 그다지 걱정하지 않는 상황에서 기능 레이아웃을 만드는 것이 얼마나 간단명료한지 보고 매우 기쁘다고 말해야 한다.
고정 너비 레이아웃의 CSS 메쉬와 flexbox 워크플로우는 어떻게 보입니까?
예:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test Grid Layouts</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<nav>
<div id="logo">Using Grid</div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="content">
<section class="hero">
<h3>Color Me Black</h3>
</section>
<article>
<h1>Title</h1>
<p>I love content!</p>
</article>
</div>
</main>
<footer>
<nav>
<div class="siteinfo">Made by Angelo</div>
</nav>
</footer>
</div>
</body>
</html>
HTML:html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Roboto', 'Helvetica', sans-serif;
}
.container {
display: grid;
min-height: 100%;
grid-template-rows: 48px [stage] auto 48px;
grid-template-columns: 100%;
}
#logo {
color: #FFFFFF;
font-size: 1.5em;
}
header {
display: grid;
grid-template-columns: auto [head-center] 832px auto;
height: 48px;
background-color: #000000;
}
header > nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
grid-column-start: head-center;
grid-column-end: span 1;
}
header > nav ul {
margin: 0 0 0 auto;
}
header > nav ul li {
display: inline;
padding-left: 8px;
}
header > nav ul li a {
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
header > nav ul li a:hover {
color: #AAAAAA;
}
main {
display: grid;
grid-template-columns: auto [main] 832px auto;
grid-template-rows: auto;
grid-row-start: stage;
grid-row-end: span 1;
}
main > div.content {
grid-column-start: main;
grid-column-end: span 1;
}
main > div.content .hero {
height: 300px;
width: 100%;
background-color: #000000;
color: #FFFFFF;
}
main > div.content .hero h3 {
padding: 16px;
}
footer {
display: grid;
grid-template-columns: auto [foot-center] 832px auto;
grid-template-rows: 48px;
background-color: #000000;
}
footer > nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
grid-column-start: foot-center;
grid-column-end: span 1;
}
footer > nav > .siteinfo {
color: #FFFFFF;
}
CSS와display: grid의 사용 위치에 진정으로 관심을 가져야 한다.display: flex 요소는 우리의 최상위 격자입니다..container {
display: grid;
min-height: 100%;
grid-template-rows: 48px [stage] auto 48px;
grid-template-columns: 100%;
}
.container 을 사용하여 최상위 행 (위에서 아래로) 을 정의합니다.고정 크기, 백분율 또는 grid-template-rows 일 수 있습니다.속성 아래의 각 사양명세는 정의된 순서에 따라 하위 항목에 매핑됩니다.예를 들어 첫 번째 auto 항목은 나의 첫 번째 줄, 48px (별명 auto 은 나의 두 번째 줄, stage 은 나의 마지막 줄이다.나는 또한 희망 48px 용기의 전체 넓이를 지정했다.현재 나는 이미 이 작업을 완성했다. 나는 이 격자 요소에서 만든 직접 하위 요소를 고려해야 한다. 왜냐하면 내가 응용하는 모든 속성은 이 부모 요소의 직접 하위 요소이기 때문이다.
grid-template-columns 부모 원소에서 온 하위 원소(내 격자 항목)는 .container, header 및 main 입니다.나는 이 항목에 속성을 정의해서 그것들이 격자에 있어야 할 위치를 알려 주었다.어디 보자
footer:main {
display: grid;
grid-template-columns: auto [main] 832px auto;
grid-template-rows: auto;
grid-row-start: stage;
grid-row-end: span 1;
}
main 격자 아래에 다른 격자를 정의했다. 나는 이 격자 항목이 .container 줄에서 시작하는 곳부터 시작하고 그 아래에서 (또는 stage 하나의 격자 공간을 확장한다고 말했다.만약 내가 시작 줄의 별명을 span 로 부르지 않았다면, 나는 그 중에서 시작하고자 하는 줄의 수를 아래로 계산해서 이 숫자를 입력해야 한다. (이 예에서 그것은 stage이게 거의 전부야.HTML2 표기와는 다르지만 배치된 심리 모델은 매우 비슷하다.<table>과colspan의 작업 방식이 위rowspan의 속성과 매우 비슷하다고 상상할 수 있습니다.나에게 있어서 두 가지 가장 중요한 개념은
span 레이아웃의 부모 요소와 각'항'을 정의하는 하위 요소이다.항목은 메쉬의 한 위치에 컨텐트로 매핑되는 DOM 요소입니다.더 복잡한 레이아웃을 위해 중첩
grid 할 수 있습니다.이렇게 하는 것은 페이지의 눈썹과 꼬리의 배경을 전체 페이지의 너비로 확장하고 grid 요소에'내부'격자를 유지하기 위해서이다. 그 내용은 자동 너비의 경계를 중심으로 한다.비록 나는
main를 사용하여 레이아웃을 관리하지만, 나는 grid를 사용하여 레이아웃의 하위 요소의 포지셔닝 행위를 관리한다.이것은 수직과 수평 포지셔닝이 아니라 하위 대상 간의 상대적인 간격, 심지어 정렬이다.Flex는 이 방면에서 매우 잘해서 레이아웃에 사용할 수 있지만 결국, DOM이 점점 복잡해지면서 해커의 공격을 진정으로 느끼기 시작했다.따라서 큰 화면 구성 요소를 설계하려면 flex 를 사용하십시오.grid에 대해 선, 궤적, 구역과 단원격 등 더 많은 고려가 필요하다.나는 또 별명을 대량으로 사용했다.이것들은 모두 네가 마땅히 놀고 이해해야 할 것들이다.그러니까 실험을 시작하는 게 좋을 거야.계속해서 HTML을 한 파일에 직접 복사하여
grid 로 저장한 다음 CSS를 index.html 로 저장하고 폴더에 저장합니다.Python 3을 설치하고 사용할 수 있는 유닉스 셸이 있다면 다음 서비스를 제공할 수 있습니다.
$ cd YOUR_FOLDER
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
styles.css로 열고 브라우저의 내장 개발자 콘솔을 사용하여 CSS 값을 조정하거나 디스크에서 파일을 직접 편집하고 브라우저에서 새로 고침을 클릭하여 매번 변경합니다.또한 일부 이동 보기를 사용해 보십시오.너는 곧 너비가 고정된 것을 볼 수 있을 것이다.당신은 그것을 유창하거나 민감한 방식으로 일하게 할 수 있습니까?여기에는 this blog site의 HTML과 CSS를 보라는 힌트가 있습니다.
어쨌든
격자를 사용하면 많은 일을 할 수 있다.너는 매체 조회에 가입할 수 있다. 만약 네가 원한다면, 너는 너의 배치를 완전히 원활하게 할 수 있다.대부분의 현대 브라우저는 격자와 flex를 지원합니다.the grid guide 및the flexbox guide 또는the spec itself을 조회하여 더 많은 정보를 얻을 수 있습니다. 가장 중요한 것은 해커를 버리는 것입니다!
공구서류
Reference
이 문제에 관하여(메쉬 및 Flexbox의 CSS 프레임워크 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alakra/dropping-css-frameworks-for-grid-and-flexbox-543i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
