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



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

align-content: stretch(기본값), flex-start, flex-end, center, space-between, space-around (플렉서블 박스에 적용)

stretch: 아이템을 확장해서 배치

flex-start: 교차축의 시작점에 배치

flex-end: 교차축의 끝점에 배치

center: 중앙배치

space-between : 플렉서블 박스에 빈공간이 있을경우 첫번째 마지막 아이템은 양끝에 붙이고 나머지 아이템은 동일한 간격으로 정렬

space-around : 플렉서블 박스에 빈공간이 있을경우 박스 양쪽에 공간을 둔채 동일한 간격으로 정렬



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-content: stretch(기본값), flex-start, flex-end, center, space-between, space-around (플렉서블 박스에 적용)
stretch: 아이템을 확장해서 배치
flex-start: 교차축의 시작점에 배치
flex-end: 교차축의 끝점에 배치
center: 중앙배치
space-between : 플렉서블 박스에 빈공간이 있을경우 첫번째 마지막 아이템은 양끝에 붙이고 나머지 아이템은 동일한 간격으로 정렬
space-around : 플렉서블 박스에 빈공간이 있을경우 박스 양쪽에 공간을 둔채 동일한 간격으로 정렬
*/
/* 여러줄인 플렉스 아이템을 첫번째 마지막 아이템은 양쪽 끝에 붙이고 나머지 아이템은 동일한 간격으로 정렬 */
/* 전체박스 */
#wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 90%;
    height: 300px;
    margin: 0 auto;
    border: 4px solid #000;
}
/* 플렉스 아이템 */
#wrap div {
    width: 100%;
    height: 50px;
}
/* 첫번째 아이템 */
#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-6.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

+ Recent posts

티스토리툴바