FlexBox 전체 설명서
10063 단어 javascriptcsswebdevcomputerscience
소개하다.
새로운 웹 프로젝트를 만들 때, 웹 사이트 구성 요소의 주요 구조를 고려하고 있음을 발견할 수 있습니다.Bootstrap과Foundation 등 CSS 프레임워크와 각각의 격자와 CSS 규칙에 대한 사용으로 양식이 좋은 레이아웃을 신속하게 얻기 쉽다.그러나 이런 틀을 쓰지 않을 이유가 있을 때가 있다.예를 들어, 당신은 매우 간단한 사이트를 가지고 있을 수도 있고, 프레임워크가 좀 지나칠 수도 있다.또는 매우 구체적인 구조를 고려하여 프레임워크의 기본 코드를 대량으로 조정해야 한다.
서로 다른 설비가 가득한 세계에서 당신의 구조와 디자인이 사이즈의 변화에 호응하는 것을 확보하는 것은 매우 중요하다.따라서 유연한 포석은 필수적이다.
몇 년 전, 웹 개발자들은 프레임워크 라벨과 테이블 라벨에 심각하게 의존했다.둘 다 장점이 있지만, 일부 새로운 모듈은 우리가 더욱 유연한 레이아웃을 만드는 데 도움을 줄 것이다.두 개의 가장 유망한 포석 모듈은Grid과Flexbox이다.
grid와 flexbox 사이의 차이는 좀 곤혹스러울 수 있습니다.어떤 사람들은 Grid가 Flexbox의 후계자라고 생각하지만, 이것은 옳지 않다.비록 너는 그 중 하나 또는 다른 하나를 사용하여 같은 레이아웃을 사용할 수 있지만, 그것들은 모두 각자 가장 눈부신 용례를 가지고 있다.
일반적으로 가장 따르기 쉬운 규칙은 다음과 같습니다.
연습: css Flexbox를 사용하여 응답 메뉴 구성 요소 만들기
1단계:기본 코드
우리는 기본적인 html 페이지부터 시작할 것이다.이 실험을 편리하게 하기 위해서, 우리는 css를 같은 파일에 저장할 것입니다.
보시다시피 우리는div가 하나 있는데, 그것은div가 세 개 있습니다.이것들은 우리 메뉴의 주요 버튼이다.그것들은 특정한 css 표시가 없기 때문에, 서로 아래에만 나타날 뿐이다.
<html>
<head>
<style>
</style>
</head>
<body>
<div>
<div>Home</div>
<div>The Team</div>
<div>Contact</div>
<div>Search</div>
</div>
</body>
</html>
계속해서 div에 테두리 너비와 테두리 색을 추가하고children div에 배경 색을 추가합니다.인라인 또는 헤드 태그의 CSS에서 수행할 수 있습니다.
div {
border: 1px solid #6638F0;
}
div > div {
background-color: #5CC9F5;
}
2단계: 유연성
이제 Flex Box 태그를 추가하여 이러한 div 동작을 보다 유연하게 수행할 수 있습니다.
개술을 유지하기 위해서, 아버지div에게 'container' 라는 클래스를 하나 주십시오.태그 추가
display: flex;그래서 지금 우리는:<html>
<head>
<style>
div {
border: 1px solid #6638F0;
}
div > div {
background-color: #5CC9F5;
}
.container {
display: flex;
}
</style>
</head>
<body>
<div>
<div>Home</div>
<div>Team</div>
<div>Contact</div>
<div>Search</div>
</div>
</body>
</html>
3단계: Flexbox 속성 사용
Flexbox에는 다음과 같은 두 가지 흥미로운 특성이 있습니다.
1. 부모의 재산
2.아이의 재산
.container > div {
background-color: #5CC9F5;
min-width: 80px;
text-align: center;
}
3단계: 응답 증가
네, 이제 데스크톱에서 잘 작동하는 메뉴 표시줄이 생겼습니다. 하지만 모바일 기기에서 빠르게 작동할 수 있기를 바랍니다.
이를 위해서는 여러 가지 UX 방법이 있습니다.가장 빠른 방법은 flex 부모에'wrap'속성을 추가하는 것이다.
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
@media all and (max-width: 400px) {
.container {
display: flex;
flex-direction: column;
}
.search {
margin-left: 0;
}
}
이제 align self 속성을 사용하여 div를 가운데로 배치할 수 있습니다.
.container > div {
align-self: center;
}
이것이 최종 결과다.물론 인코딩에 유일한 진리가 없기 때문에 최종적으로 약간의 차이가 생길 수 있다.
<html>
<head>
<style>
div {
border: 1px solid #6638F0;
}
.container > div {
background-color: #5CC9F5;
min-width: 80px;
text-align: center;
}
.container {
display: flex;
justify-content: space-between;
}
.search {
margin-left: auto;
}
@media all and (max-width: 400px) {
.container {
height: 200px;
display: flex;
flex-direction: column;
}
.container > div {
align-self: center;
}
.search {
margin-left: 0;
order: -1;
}
}
</style>
</head>
<body>
<div class="container">
<div>Home</div>
<div>Team</div>
<div>Contact</div>
<div class="search">Search</div>
</div>
</html>
4단계: 의미 부여
이제 우리가 원하는 CSS가 생겼으니 html을 더욱 의미 있게 해야 한다.HTML의 의미는 자주 무시되고 정말 쉽지 않다. 왜냐하면 규범은 때때로 개발자로 하여금 많은 결정을 내리게 하기 때문이다.하지만 이런 상황에서 간단하면서도 명확한 방법이 있다.
<html>
<head>
<style>
ul.container {
border: 1px solid #6638F0;
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
ul.container > li {
background-color: #5CC9F5;
min-width: 80px;
text-align: center;
}
.search {
margin-left: auto;
}
@media all and (max-width: 400px) {
ul.container {
height: 200px;
display: flex;
flex-direction: column;
}
ul.container > li {
align-self: center;
}
.search {
margin-left: 0;
order: -1;
}
}
</style>
</head>
<body>
<nav>
<ul class="container">
<li>Home</li>
<li>Team</li>
<li>Contact</li>
<li class="search">Search</li>
</ul>
</nav>
</html>
5: 추가: 간단한 스태킹 막대 그림
우리는 아직'flex grow'와'flex shrink'를 보지 못했다.이러한 속성들은 많은 가치가 있는데, 게다가 '최대 너비' 와 '최소 너비' 를 더하면 진정한 창의력을 얻을 수 있다.
"flex grow"의 간단한 예는 스태킹 막대 그래프입니다.
<html>
<head>
<style>
.container {
display: flex;
margin: 0;
padding: 0;
height: 20px;
}
.container > div:nth-child(1) {
background-color: #F78AE0;
flex-grow: 2;
}
.container > div:nth-child(2) {
background-color: #6638F0;
flex-grow: 2.2;
}
.container > div:nth-child(3) {
background-color: #4AF2A1;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</html>
접두사 추가 고려 사항
일부 브라우저는 flex box를 정확하게 표시하기 위해 접두사를 사용합니다.
전임자로서 나는 소프트웨어 기술에 대한 나의 개인적인 발견을 발표할 시간이 매우 어렵다.나는 대다수의 사람들이 모두 이렇다고 믿는다.당신들의 공헌은 저로 하여금 저를 격려하는 것을 창작하고 웹 개발과 관련된 업무를 발표할 수 있게 했습니다. 블록포스터든 더 큰 개인 프로젝트의 일부든.
내 업무 지원 - Become a Patron!
Reference
이 문제에 관하여(FlexBox 전체 설명서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/datastructures/a-complete-guide-to-flexbox-2ilc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
