공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.
재배포 수정하지 마세요.
플렉스모드를 사용하려면 플렉스 컨테이너부터 정의해야 한다.
Flexbox parent element - Container
디스플레이 속성을 플랙스로 지정하면서 컨테이너는 flexible한 부모요소가 된다.
.flex-container {
display: flex;
}
flex-direction
flex-direction 속성은 flex item들을 정렬하는 방법을 정의한다.
.flex-container {
display: flex;
flex-direction: column;
}
column : flex item들을 행 기준으로 정렬한다.
column-reverse : 행 기준 거꾸로 정렬한다.
row : 열 기준으로 정렬한다.
row-reverse : 열 기준 거꾸로 정렬한다.
flex-wrap
flex-wrap 속성은 flex item들을 감쌀 것인지 아닌지를 구체화한다.
.flex-container {
display: flex;
flex-wrap: wrap;
}
warp : flex 아이템들을 필요하다면 감싼다.
nowrap : flex 아이템들을 감싸지 않는다.
wrap-reverse : 역순서대로 필요하다면 감싼다. (역 순서대로 감싸는 것이라 만약 빈공간이 있다면 아이템들을 아래부터 채우고 윗부분에서 비게된다.)
flex-flow
flex-flow속성은 flex-direction 과 flex-wrap 속성의 축약형이다.
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content
justify-content 속성은 flex item들의 가로정렬을 정한다.
.flex-container {
display: flex;
justify-content: center;
}
center : 전체 아이템들을 컨테이너의 가운데로 정렬한다.
flex-start : 컨테이너의 시작(왼쪽)으로 정렬한다.
flex-end : 컨테이너의 끝(오른쪽)으로 정렬한다.
space-around : 아이템들의 그 줄의 전후 사이 공백을 주며 정렬한다.
space-between : 아이템들의 전후는 제외하고 사이공백만 주며 정렬한다.
align-items
align-items 속성 또한 flex item들의 세로 정렬을 정한다.
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
center : 아이템들을 컨테이너 높이의 가운데로 정렬한다.
flex-start : 컨테이너의 시작(위쪽)으로 정렬한다.
flex-end : 컨테이너의 끝(아래쪽)으로 정렬한다.
stretch : 아이템들을 컨테이너의 높이에 맞게 늘린다.
baseline : 각각 다른 크기의 아이템들을 기준 줄에 맞춰 한줄로 정렬한다.
align-content
align-content 속성은 flex 라인들을 정렬할때 사용한다.
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
space-between : flex 라인들을 사이에 같은 공백크기를 두고 정렬한다.
space-around : 라인들의 전후 사이에 공백을 두고 정렬한다.
stretch : 공백을 flex 라인 높이를 늘려 채운다.
center : flex 라인들을 컨테이너의 중간으로 모아 정렬한다.
flex-start : 라인들을 컨테이너의 시작점(위쪽)으로 정렬한다.
flex-end : 라인들을 컨테이너의 끝점(아래쪽)으로 정렬한다.
Flexbox Child Elements - Items
display : flex 속성을 가진 부모요소안의 자식 요소는 item의 속성을 지니게 된다.
order
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
각 아이템들에 order 속성을 주어 순서를 정할 수 있다.
기본 값은 0이며, order값의 순서에 맞게 보여진다.
flex-grow
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
각 아이템들의 상대적인 크기를 정할 수 있다.
기본 값은 0이며, flex-grow값에 맞는 비율로 보여진다.
flex-shrink
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
아이템의 크기가 다른아이템에 상대적으로 줄어든다.
기본 값은 1이며, 값은 꼭 숫자로 지정해줘야한다.
flex-basis
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
선택한 아이템의 처음 크기를 정한다.
flex
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
flex-grow, flex-shrink, flex-basis 속성의 축약형이다. 첫째와 둘째는 숫자로 마지막은 크기로 정해야한다.
align-self
align-self 속성은 flexible한 컨테이너의 아이템들중 특정 아이템의 세로정렬을 정한다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
center : 특정 아이템의 크기를 늘리지 않고 가운데 정렬한다.
flex-start : 특정 아이템의 크기를 늘리지 않고 컨테이너의 시작점(위쪽)으로 정렬한다.
flex-end : 특정 아이템의 크기를 늘리지 않고 컨테이너의 끝점(아래쪽)으로 정렬한다.
'웹개발 > css' 카테고리의 다른 글
[CSS] 반응형 웹페이지 디자인 (Responsive Webpage Design) (0) | 2020.07.22 |
---|---|
[CSS] 미디어쿼리 Media Queries (0) | 2020.07.20 |
[CSS] 텍스트 줄바꿈, 말줄임 처리, 글자 자르기 css (0) | 2020.07.19 |
[CSS] 그림자 text-shadow , box-shadow (0) | 2020.07.18 |
[CSS] 그리드 - 자식 속성, 그리드 함수 (0) | 2020.07.17 |