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>
반응형
'오늘의 인사이트' 카테고리의 다른 글
| [웹리뷰] 디자인 몰라도 PPT 제작 가능해?(디자인 템플릿 천국) (2) | 2021.12.23 |
|---|---|
| [생각] 이러니까 토스에서 주식하지..(간편투자 앱 사용 후기) (0) | 2021.12.07 |
| [CSS] CSS Flex Container (플렉스 박스 flex box) (0) | 2021.11.22 |
| [웹리뷰] LE PUZZ(퍼즐 판매 사이트) (0) | 2021.11.16 |
| [서비스경험디자인] 디자인방법론(feat. 오즈의 마법사) (0) | 2021.09.29 |