교차축 방향으로 다양하게 플렉스 아이템 배치하기



플렉스 아이템 교차축 방향으로 배치하기

align-items: stretch(기본값), flex-start, flex-end, center, baseline (플렉서블 박스에 적용)

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
@charset "utf-8";
/**
플렉스 아이템 교차축 방향으로 배치하기
align-items: stretch(기본값), flex-start, flex-end, center, baseline (플렉서블 박스에 적용)
stretch: 박스를 확장해서 배치
flex-start: 교차축의 시작점에 배치
flex-end: 교차축의 끝점에 배치
center: 중앙배치
baseline: 교차축의 지작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치되어 글자 베이스라인에 맞춰 나머지 박스를 배치
*/
/* 전체박스 */
/* 플렉스 아이템을 교착축의 중앙에 배치 */
#wrap {
    display: flex;
    align-items: center;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #00f;    
}
/* 플렉스 아이템 */
#wrap div {
    width: 33.3%;
    height: 200px;
}
/* 첫번째 아이템 */
#wrap div:first-child {
    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-4.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.26

+ Recent posts

티스토리툴바