css-12: flex레이아웃
Fl)ex 레이아웃
* 기본 html
<div class="flex-con">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>>
* 기본 css
.flex-con {
margin: 0 16px 16px 0;
width: 424px;
height: 312px;
background-color: #ddd;
}
.flex-item {
padding: 12px;
font-weight: bold;
color: white;
background-color: slateblue;
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 48px;
min-height: 48px;
}
.flex-item:nth-child(3) ~ .flex-item {
display: none;
}
display: flex
display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됩니다.
inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있습니다.
.flex-con {
margin: 0 16px 16px 0;
width: 424px;
height: 312px;
background-color: #ddd;
display: flex;
}
.flex-item {
padding: 12px;
font-weight: bold;
color: white;
background-color: slateblue;
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 48px;
min-height: 48px;
}
.flex-item:nth-child(3) ~ .flex-item {
display: none;
}
* flex-direction: low: 세로형태 / column: 가로형태 , 기본값 / non-revser: 장소가 역으로 바뀜
flex-direction
flex-direction은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을
이 값에 따라 justify-content, align-items, align-content 등의 속성들이 작용할 방향이 결정됩니다
* flex-direction: row,
justify-content
메인축에서의 형태변환
• Default: flex-start;
• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다
.flex-con {
margin: 0 16px 16px 0;
width: 424px;
height: 312px;
background-color: #ddd;
display: flex;
justify-content: center;
}
.flex-item {
padding: 12px;
font-weight: bold;
color: white;
background-color: slateblue;
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 48px;
min-height: 48px;
}
.flex-item:nth-child(3) ~ .flex-item {
display: none;
}
align-items
align-items는 수직 축(메인 축의 반대)에서 아이템들을 정렬할 방식을정합니다.
wrap으로 아이템이 여러 줄이 되면 align-content를 사용해서 보다
다양한 방식으로 정렬할 수 있습니다
Ex)
stretch: 기본값 / 메인축의 반대쪽을 꽉채우게 되어있음
center: 가운데..
Basee-line : 텍스트를 다 균등하게보여질수있도록
Flex-end: 아래로
flex-start: 위로 붙임
.flex-con {
margin: 0 16px 16px 0;
width: 424px;
height: 312px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: flex-start
}
.flex-item {
padding: 12px;
font-weight: bold;
color: white;
background-color: slateblue;
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 48px;
min-height: 48px;
}
.flex-item:nth-child(3) ~ .flex-item {
display: none;
}
___
align-content
* 요소 전체를 움직임
(algin-items의 아이템들 각각의 영역에서만 움직이는것과 다름)
ex) stretch, center, space-between, space-around, space-evenly, Flex-end, flex-start…
gap 속성으로는 아이템간에 간격을 줄 수 있으며 두 개의 값을 넣어서
가로 간격과 세로 간격을 다르게 지정하는 것도 가능합니다.
wrap
- nowrap: 모든 요소들을 한 줄에 정렬합니다.
- wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
- wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex 컨테이너 안 아이템의 속성들
flex-basis는 메인 축상의 길이로, 컨테이너의 flex-direction 값에
따라 너비 또는 높이값으로 작용합니다. 기본값은 auto입니다.
(작아지거나 커질때 비율 일정하게 변하게하기)
flex-grow는 빈 공간을 채울지 여부, 그리고 채울 시 다른 아이템들의
동 속성값에 비례해서 공백을 나눠갖습니다. 기본값은 0 입니다.
flex-shrink 속성은 전체 공간이 부족할 때, 해당 아이템의 길이가
컨텐츠의 너비 또는 flex-basis로 지정한 값보다 작아질 수 있을지를
지정합니다. 기본값은 1이며, 증가할수록 길이가 많이 줄어듭니다.
Flex-shrink <–> Flex-grow
작아지거나 커질때 비율 정하기
위 속성들은 아래와 같이 flex 속성으로 한 줄에 나타낼 수 있습니다.
- flex: (flex-grow 값);
- flex: (flex-grow 값) (flex-basis 값);
- flex: (flex-grow 값) (flex-shrink 값) (flex-basis 값);
플렉스 컨테이너의 아이템들은 order 속성을 사용해서
순서를 임의로 변경할 수 있습니다.
숫자가 특정되어 있지 않다면 (기본값 0) 코드에 작성된 순서대로 나열되죠.
각 아이템들의 숫자를 변경해가며 결과를 살펴보세요!
실습
<div id="container">
<div id="header">
<div>로고</div>
<div>메뉴들</div>
</div>
<div id="main">
<div id="content">
부모의 한가운데 배치
</div>
</div>
<div id="footer">
</div>
</div>
body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh; display: flex;
flex-direction: column;
}
#header {
flex-basis: 100px;
display: flex;
align-items: flex-end;
gap: 12px;
padding: 12px;
background-color: dodgerblue;
}
#header div {
background-color: yellow;
padding: 12px 0;
text-align: center;
}
#header div:first-child {
flex-basis: 100px;
}
#header div:last-child {
flex-grow: 1;
}
#main {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
#content {
padding: 24px;
background-color: skyblue;
}
#footer {
flex-basis: 60px;
background-color: tomato;
}
댓글남기기