교차축 방향으로 플렉스 아이템 개별 배치하기
플렉스 아이템 교착축 방향으로 개별 배치하기
align-self: auto, stretch, flex-start, flex-end, center, baseline (플렉스 아이템에 적용)
auto: 플렉서블 박스의 align-items 속성값 상속
stretch: 박스를 확장해서 배치
flex-start: 교차축의 시작점에 배치
flex-end: 교차축의 끝점에 배치
center: 중앙배치
baseline: 교차축의 지작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치되어 글자 베이스라인에 맞춰 나머지 박스를 배치
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | @charset "utf-8"; /** 플렉스 아이템 교착축 방향으로 개별 배치하기 align-self: auto, stretch, flex-start, flex-end, center, baseline (플렉스 아이템에 적용) auto: 플렉서블 박스의 align-items 속성값 상속 stretch: 박스를 확장해서 배치 flex-start: 교차축의 시작점에 배치 flex-end: 교차축의 끝점에 배치 center: 중앙배치 baseline: 교차축의 지작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치되어 글자 베이스라인에 맞춰 나머지 박스를 배치 */ /* 첫번째 플렉스 아이템을 교차축의 끝점에 배치 */ /* 전체박스 */ #wrap { display: flex; width: 90%; height: 300px; margin: 0 auto; border: 4px solid #00f; } /* 플렉스 아이템 */ #wrap div { width: 33.3%; height: 100px; } /* 첫번째 아이템 */ #wrap div:first-child { align-self: flex-end; background: #eb4a24; } /* 두번째 아이템 */ #wrap div:nth-child(2) { background: #1488c8; } /* 마지막 아이템 */ #wrap div:last-child { background: #f7e041; } | cs |
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <!-- css 파일 임포트 --> <link rel="stylesheet" href="04-5.css" /> <title>Insert title here</title> </head> <body> <div id="wrap"> <div></div><div></div><div></div> </div> </body> </html> | cs |
결과
첫번째 플렉스 아이템을 교차축 방향의 끝점에 배치하기
'IT > - 프로그래밍' 카테고리의 다른 글
| 반응형웹 플렉스 아이템 배치 순서 바꾸기 (0) | 2016.08.28 |
|---|---|
| 반응형웹 여러줄 플렉스 아이템을 교차축 방향으로 다양하게 배치하기 (0) | 2016.08.28 |
| 반응형웹 교차축 방향으로 다양하게 플렉스 아이템 배치하기 (0) | 2016.08.28 |
| 반응형웹 주축 방향으로 다양하게 플렉스 아이템 배치하기 (0) | 2016.08.28 |
| 반응형웹 플렉스 아이템 배치방향과 플렉스 아이템을 여러줄로 배치하기 (0) | 2016.08.28 |