flex item 속성
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
- order: item 순서를 직접적으로 지정 가능
<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>
- flex-grow: flex-grow의 기본값은 0이고 상대적으로 다른 아이템보다 몇 배 가로로 늘어지게 할 건지 설정. 값이 높을수록 늘어남이 크다.
<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>
- flex-shrink: 기본값은 1이고 값이 높을수록 축소. 값이 0이면 기본1인 아이템보다 늘어남.
<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>
- flex-basis: 플렉스 항목 초기 길이 지정. 공통 css로 플렉스 아이템을 100px로 지정하고 특정 아이템만 초기값을 200px으로 지정해주면 해당 비율을 유지하여 늘어나고 줄어든다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
- flex: 플렉스 속성에 대한 약식 속성. flex-grow, flex-shrink, flex-basis순서.
확장 불가능(0), 축소 불가능(0), 가로 200px 초기값 설정.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
- align-self: flex-container에 높이 200px을 줘도 플렉스 아이템에 인라인 스타일로 align-self: center를 주면 height:200px에 대한 css가 해제되고 item속성이 지니는 높이값만 가지고 세로 높이 가운데 정렬.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
<p>The align-self property overrides the align-items property of the container.</p>
</body>
</html>
align-self: flex-start, flex-end의 경우 고유의 본인 속성만 가진 체 세로 시작점 정렬, 세로 끝점 정렬.
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>