Day4 VSCODE_CSS Flex
2023. 3. 30. 17:05ㆍCSS
🟡Flex 레이아웃
- 수평정렬을 하기 위한 속성
- 사용법: display: Flex
🟡Flex-wrap
-플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
-no-wrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
-wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
-wrap-reverce: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단 -위쪽으로 넘김)
<title>플렉스 레이아웃1</title> <style> #container{ width: 1000px; height: 500px; margin: 0 auto; border: 3px inset purple; display: flex; flex-wrap: nowrap; /*flex-wrap: wrap;*/ /*flex-wrap: wrap-reverse;*/ /*flex-direction: row-reverse; 가로 반대로*/ /*flex-direction: column;*/ /*flex-direction: column-reverse;*/ } #container >div { width: 400px; border: 1px solid black; background-color: gold; } span{ font-size: 50px; font-weight: bold; padding: 20px; } </style> </head> <body> <h2>플렉스 레이아웃1</h2> <div id="container"> <div id="box1"><span>1</span></div> <div id="box2"><span>2</span></div> <div id="box3"><span>3</span></div> </div> </body> </html>
예시) nowr
🟡Flex-direction
-플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
-row: 기본값 (가로배치) -row-reverce: 가로배치(반대로)
-column: 세로배치 -column-reverse: 세로배치 반대로
🟡Flex-flow
-flex-wrap과 flex-direction을 한번에 지정할 수 있음
-flex-flow: row nowrap;
🟡justify-content
-플렉스 요소의 수평방향 정렬방식 설정
- flex-start: 기본값, 앞쪽에서부터 배치
- flex-end: 뒤에서부터 배치
- center: 가운데 배치
-space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
-space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
예시) 1번 센터 | 2번 엔드 | 3번 space-between | 4번 space-around
<title>플렉스 레이아웃2</title> <style> .wrapper{ width: 500px; height: 200px; margin: 0 auto; border: 3px solid red; } .wrapper div{ width: 50px; border: 2px solid black; background-color: gold; } #container{ display: flex; justify-content: center; justify-content: end; justify-content: space-between; justify-content:space-around; align-items: stretch; /*기본값*/ align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; } #box2{ align-self: flex-end; /*혼자 밑으로 내려감*/ } #box1{ order:5; /*다섯번째로 이동*/ } #box2{order:1;} #box3{order:4;} #box4{order:2;} </style> </head> <body> <h1> justify-content/align-self/order</h1> <div id="container" class="wrapper"> <div id="box1"> <p>1</p> </div> <div id="box2"> <p>2</p> </div> <div id="box3"> <p>3</p> </div> <div id="box4"> <p style="font-size: 50px;">4</p> </div> <div id="box5"> <p>5</p> </div> </div> </body> </html>
🟡align-items
- 플렉스 요소의 수직방향 정렬 방식을 설정
stretch: 기본값.아이템들이 수직축 방향으로 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
baseline: 요소들이 텍스트 베이스라인 기준으로 정렬
🟡align-self
- 플렉스 요소에 수직축으로 다른 align 속성 값을 설정
🟡order
- 플렉스 요소의 순서를 결정
🟡align-content
- 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식 결정
-flex wrap으로 설정해줘야함!
stretch: 기본값. 위 아래로 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
baseline: 요소들이 텍스트 베이스라인 기준으로 정렬
| 🟡flex-basis | - 플렉스 요소를 flex-basis의 설정한 값보다 커질수 있는지를 결정할 수 있는 속성 |
| 🟡flex-grow | - 플렉스 요소를 flex-basis의 설정한 값보다 커질수 있는지를 결정할 수 있는 속성 |
| 🟡flex-shrink | - 플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는 지를 결정하는 속성 |
| 🟡flex | - flex-grow / flex-basis / flex-shrink를 한번에 설정할 수 있음 |
728x90
'CSS' 카테고리의 다른 글
| [CSS] Modal에 scroll 부여하기 (0) | 2024.03.04 |
|---|---|
| Day5_VSCODE_CSS CSS 2D+Transform (0) | 2023.04.04 |
| Day4_VSCODE_CSS 다단 레이아웃 + Flex 레이아웃 (0) | 2023.03.30 |
| Day3 VSCODE_CSS Z-Index + Float + Clear (0) | 2023.03.29 |
| Day3 VSCODE_CSS 마진+ 박스사이징 + 디스플레이 + 포지션 (0) | 2023.03.29 |