Flexbox (CSS): 당신이 알아야 할 모든 것
(주의: 저는 하면서 배울 것을 믿습니다. 따라서 본고가 가장 큰 가치를 발휘할 수 있도록 코드 편집기를 열고 문장에 붙인 코드를 복사하여 신기한 발생을 보는 것을 권장합니다.)
Flexbox는 flexible box를 나타냅니다.그것은 용기의 항목을 정렬하는 간단하고 효과적인 방법을 제공했다.
신축성 프로젝트: 우리가 조정하려고 노력하고 있는 요소.
Flex 컨테이너: Flex 항목이 포함된 상위 컨테이너입니다.
주축: 우리는 탄성 프로젝트의 축을 조정하려고 시도한다.
가로축: 주축에 수직인 축.
더 잘 이해하기 위해 우리는 flexbox 속성을 두 부분으로 나눈다.
(1) flex 컨테이너에 적용되는 속성:
(a) flex-direction
(b) flex-wrap
(c) justify-content
(d) align-items
(2) flex 항목에 적용되는 속성:
(a) order
(b) flex-grow
(c) flex-shrink
다음은 다양한 속성을 적용할 기본 코드입니다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
flex 용기에 적용되는 속성을 알아보겠습니다.
(1a) 벤드 방향:
신축성 항목을 정렬하는 방향을 제공합니다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
flex-direction: row;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
'p'는 블록급 원소이지만 우리가'탄성 방향: 행'을 제시하면 모든 탄성 항목은 수평으로 배열된다.그러나 기본적으로 flex 방향은row로 설정되어 있기 때문에 같은 방향을 제공하지 않아도 작동합니다. (display:flex)
다음 예제에서는 벤드 방향: 행 반전을 설정합니다.
other than those depicted above, there are other flex directions as well:
column
column-reverse
I advise you to try these out on your own.
(1b)부드러운 포장
이것은 웹 응용 프로그램이 모든 장치 (노트북, 아이패드, 핸드폰 등) 에 렌더링을 할 수 있도록 하는 매우 중요한 속성이다. 방법은 포트의 크기에 따라 flex 항목을 조정하여 넘치지 않도록 하는 것이다.기본적으로 flex wrap은 값 "nowrap"으로 설정됩니다.
다음 예에서 "flex wrap: wrap"을 사용합니다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
flex-wrap: wrap;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
'부드러운 패키지: 역방향 패키지'기능도 있는데 이 기능에서 관찰공의 넓이가 시간 줄어들면 물건이 아래로 떨어지지 않고 위로 올라간다.해봐.
(1c) 내용이 합리적임을 증명한다
justify 콘텐츠를 사용하면 주축을 뛰어넘어 flex 항목을 이동할 수 있습니다.justify 콘텐츠의 기본값은 flex start입니다.
다음 예제에서 컨텐트 조정: 중심을 사용합니다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
justify-content: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
'내용 조정: 주위 공간'의 출력을 살펴보자.👇
Now, I would nudge you to try out other properties of justify-content such as:
flex-start
flex-end
space-between
space-evenly
(1d) 항목을 정렬하려면 다음과 같이 하십시오.
align items 속성은 flex 컨테이너 내의 항목을 가로축을 따라 정렬합니다. 마치justify content가 주축을 따라 정렬하는 것과 같습니다.
컨텐트 정렬: 주변 공간 정렬과 항목 정렬: 중심 두 단어의 공통 작용을 살펴보겠습니다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
justify-content: space-around;
align-items: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
align items의 기본값은stretch입니다. flex 항목은 flex 용기의 가로축에 늘어납니다. (그러나 flex 항목이 높이를 지정하지 않았을 때 작동합니다.)해봐.
이제 정렬 항목: 가운데 맞춤이 정렬되지 않은 상태에서 어떻게 작동하는지 살펴봅시다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
align-items: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
이제 flex 프로젝트에 적용되는 속성을 알아보겠습니다.
(2a) 명령
order 속성이 단일 숫자로 지정되었습니다.우리는order 속성을 사용하여 flex 프로젝트의 순서를 변경할 수 있습니다.기본적으로 모든 신축성 항목은 주문서: 0이 있습니다.
순서가 클수록 주축을 따라 요소의 거리가 멀어집니다.
다음 예를 살펴보겠습니다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
align-items: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
.child:nth-child(2){
order: 2;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
우리가 신축성 물품 B에게'주문서:2'를 주면 맨 오른쪽으로 밀려나고, 다른 신축성 물품에'주문서:3'이 있으면 신축성 물품 B 뒤에 쌓여 있기 때문이다. 그러나 모든 신축성 물품이 같은 주문서(2,3이든 다른 숫자든)가 있다면 아무런 효과가 없다.
(2b) 탄력적 성장
flex grow 속성은 단일 숫자로 지정됩니다.flex grow는 놀라운 자산이다.이것은 flex 용기에서 주축을 가로지르는 남은 공간을 이 항목에 분배해야 하는 수량 (flex 성장 인자) 을 지정합니다.
이 점을 하나의 예로 이해합시다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
align-items: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
.child:nth-child(4){
flex-grow: 1;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
👆 여기서 우리는'flex grow:1'을 flex 프로젝트 D에 분배하고 모든 남은 공간을 차지하는 것을 볼 수 있다.
만약 모든 동급 항목이 같은 탄력성장인자를 가지고 있다면 모든 항목은 같은 잉여공간 몫을 얻게 될 것이다. 그렇지 않으면 서로 다른 탄력성장인자가 정의한 비율에 따라 분배될 것이다.
다른 예로 이 점을 이해합시다.
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
align-items: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
.child:nth-child(4){
flex-grow: 1;
}
.child:nth-child(3){
flex-grow: 2;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
👆 여기서 우리는'flex grow:2'를 flex item C에 분배하고'flex grow:1'을 flex item D에 분배하며 나머지 공간은 서로 다른 flex grow factors가 정의한 비율(C:D=2:1)에 따라 분배하는 것을 볼 수 있다.
(2c) 구부러짐 수축
탄성 수축 속성은 탄성 항목의 탄성 수축 계수를 설정합니다.모든 flex 항목의 크기가 flex 용기보다 크면 항목은 flex 수축에 따라 수축됩니다.
flex grow와 달리 flex grow는 화면 크기 (보기 포트) 가 증가할 때 어떤 방식으로 실행할 수 있도록 하고, flex shrink는 보기 포트가 감소할 때 flex 프로젝트의 실행에 도움이 됩니다.
우리는 하나의 예로 이해한다. (우리는 flex item C에 "flex shrink: 3"을 제공하여 무슨 일이 일어날지 볼 것이다.)
<!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.0">
<title>Document</title>
<style>
div{
background-color: blue;
border: 2px solid black;
height: 400px;
display: flex;
align-items: center;
}
.child{
background-color: pink;
border: 2px solid black;
height: 50px;
}
.child:nth-child(3){
flex-shrink: 3;
}
</style>
</head>
<body>
<div>
<p class="child">flex-item A</p>
<p class="child">flex-item B</p>
<p class="child">flex-item C</p>
<p class="child">flex-item D</p>
</div>
</body>
</html>
☝️여기서 flexshrink 속성은 flexshrink factor를'flexitem C'로 설정하기 때문에 화면이 시간이 되면 flexitem C의 수축 속도는 다른 flexitem의 3배이다.
나는 매일 인터넷 개발에 관한 문장을 한 편씩 쓴다. (주로 CSS, JS, React) 그래, 잘 들었다. 매일.만약 당신도 dev.to와 트위터에서 공부한다면 저를 주목해 주세요.
내 트위터 핸들:
링크edin 형식이라면 연결하십시오:
좋은 하루 되세요.😀!
Reference
이 문제에 관하여(Flexbox (CSS): 당신이 알아야 할 모든 것), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/therajatg/flexbox-css-everything-you-need-to-know-3alk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
