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



플렉스 아이템 배치하기

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

플렉스 아이템 배치방향과 플렉스 아이템을 여러줄로 배치하기



플렉스 아이템 여러줄로 배치 속성

flex-wrap: nowrap(기본값), wrap, wrap-reverse (플렉서블 박스에 적용)

nowrap : 한줄로 배치

wrap : 여러줄로 배치

wrap-reverse : 역방향으로 여러줄로 배치



플렉스 아이템 배치방향 + 플렉스 아이템 여러줄 배치 속성

flex-flow: flex-direction flex-wrap (플렉서블 박스에 적용)

ex) flex-flow : row nowrap(기본값)



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
@charset "utf-8";
/**
플렉스 아이템 여러줄로 배치 속성
flex-wrap: nowrap(기본값), wrap, wrap-reverse (플렉서블 박스에 적용)
nowrap : 한줄로 배치
wrap : 여러줄로 배치
wrap-reverse : 역방향으로 여러줄로 배치
*/
/**
플렉스 아이템 배치방향 + 플렉스 아이템 여러줄 배치 속성
flex-flow: flex-direction flex-wrap (플렉서블 박스에 적용)
ex) flex-flow : row nowrap(기본값)
*/
/* 전체박스 */
/* 플렉스 아이템 배치방향 + 플렉스 아이템을 여러줄로 배치 */
#wrap {
    display: flex;
    flex-flow: row wrap-reverse;
    
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #000;
}
/* 자식박스 */
#wrap div {
    width: 100%;
}
/* 첫번째박스 */
#wrap div:first-child {
    background: #eb4a24;
}
/* 두번째박스 */
#wrap div:nth-child(2) {
    background: #1488c8;
}
#wrap div:nth-child(3) {
    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-2.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.26
반응형웹 미디어쿼리 예제 - 화면너비에 따라 구조 변경하기  (1) 2016.08.24
안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23

플렉서블 박스에 플렉스 아이템 가로방향으로 배치하기



플렉서블 박스 = 부모박스

플렉스 아이템 = 플렉서블 박스(부모박스) 의 자식 박스

주축방향 = 플렉스 아이템의 배치 방향



플렉서블 박스 속성

display: flex, inline-flex (모든요소에 적용)

flex :  박스를 블록 수준의 플렉서블 박스로 만든다

inline-flex : 박스를 인라인 수준의 플렉서블 박스로 만든다



플렉스 아이템의 배치방향 속성

flex-direction : row(기본값), row-reverse, column, column-reverse (플렉서블 박스에 적용)

row : 왼쪽 -> 오른쪽 배치

row-reverse : 오른쪽 -> 왼쪽 배치

column : 위 -> 아래 배치

column-reverse : 아래 -> 위 배치



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
44
45
46
47
48
49
50
@charset "utf-8";
/** 
플렉서블 박스 = 부모박스
플렉스 아이템 = 플렉서블 박스(부모박스) 의 자식 박스
주축방향 = 플렉스 아이템의 배치 방향
*/
 
/** 
플렉서블 박스 속성
display: flex, inline-flex (모든요소에 적용)
flex :  박스를 블록 수준의 플렉서블 박스로 만든다
inline-flex : 박스를 인라인 수준의 플렉서블 박스로 만든다
플렉스 아이템의 배치방향 속성
flex-direction : row(기본값), row-reverse, column, column-reverse (플렉서블 박스에 적용)
row : 왼쪽 -> 오른쪽 배치
row-reverse : 오른쪽 -> 왼쪽 배치
column : 위 -> 아래 배치
column-reverse : 아래 -> 위 배치
*/
/* 전체박스 */
/* 플렉스 아이템을 왼쪽에서 오른쪽으로 배치 */
#wrap {
    display: -webkit-flex; /* -webkit : 웹킷 계열 전용 접두사 */
    display: flex;
    flex-direction: row;
    
    width: 90%;
    height: 500px;
    margin: 0 auto;
    background: #eb4a24;
    border: 4px solid #000;
}
/** 자식박스 */
#wrap div {
    width: 33.3%;
}
/* 첫번째박스 */
#wrap div:first-child {
    background: #eb4a24;
}
/* 두번째박스 */
#wrap div:nth-child(2) {
    background: #1488c8;    
}
/* 세번째박스 */
#wrap div:nth-child(3) {
    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-1.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
반응형웹 미디어쿼리 예제 - 화면너비에 따라 구조 변경하기  (1) 2016.08.24
안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23
안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22

+ Recent posts

티스토리툴바