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



플렉스 아이템 배치하기

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

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
@charset "utf-8";
/**
플렉스 아이템 배치하기
justify-content: flex-start(기본값), flex-end, center, space-between, space-around (플렉서블 박스에 적용)
flex-start : 아이템을 주축의 시작점에 배치
flex-end : 아이템을 주축의 끝점에 배치
center : 중앙배치
space-between : 플렉서블 박스에 빈공간이 있을경우 첫번째 마지막 아이템은 양끝에 붙이고 나머지 아이템은 동일한 간격으로 정렬
space-around : 플렉서블 박스에 빈공간이 있을경우 박스 양쪽에 공간을 둔채 동일한 간격으로 정렬
*/
/* 박스 양옆에 공간을 둔채 동일한 간격으로 아이템 배치 */
/* 전체박스 */
#wrap {
    display: flex;
    justify-content: space-around;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #00f;    
}
/* 플렉서블 아이템 */
#wrap div {
    width: 20%;
}
/* 첫번째 아이템 */
#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-3.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.26
반응형웹 미디어쿼리 예제 - 화면너비에 따라 구조 변경하기  (1) 2016.08.24

+ Recent posts

티스토리툴바