플렉스 아이템을 비율대로 늘이거나 줄이기



플렉스 아이템 크기 조절하기

flex: [flex-grow][flex-shrink][flex-basis] (플렉스 아이템에 적용)

flex-grow : 플렉서블 박스에 여유공간이 있을경우 비율에 따라 플렉스 아이템 크기를 늘린다 

ex) 1 1 2 : 여유공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에 더한다 (=layout_weight)

flex-shrink : 플렉서블 박스가 넘칠경우 비율에 따라 플렉스 아이템 크기를 줄인다

ex) 1 1 2 : 넘치는공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에서 뺀다

flex-basis : 플렉스 아이템의 기본크기를 설정

ex) 0 : flex-grow, flex-shrink 에서 설정한 비율 적용

ex) auto : 기본크기 그대로 적용



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
@charset "utf-8";
/**
플렉스 아이템 크기 조절하기
flex: [flex-grow][flex-shrink][flex-basis] (플렉스 아이템에 적용)
flex-grow : 플렉서블 박스에 여유공간이 있을경우 비율에 따라 플렉스 아이템 크기를 늘린다 
ex) 1 1 2 : 여유공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에 더한다 (=layout_weight)
flex-shrink : 플렉서블 박스가 넘칠경우 비율에 따라 플렉스 아이템 크기를 줄인다
ex) 1 1 2 : 넘치는공간을 4등분하여 1/4, 1/4, 2/4 씩 기본크기에서 뺀다
flex-basis : 플렉스 아이템의 기본크기를 설정
ex) 0 : flex-grow, flex-shrink 에서 설정한 비율 적용
ex) auto : 기본크기 그대로 적용
*/
 
/* 플렉스 아이템을 1:1:2 비율로 크기 조절 */
/* 전체박스 */
#wrap {
    display: flex;
    width: 90%;
    height: 300px;
    margin: 0 auto;
    border: 4px solid #00f;
}
/* 첫번째 아이템 */
#wrap div:first-child {
    flex: 1 1 0;
    background: #eb4a24;
}
/* 두번째 아이템 */
#wrap div:nth-child(2) {
    flex: 1 1 0;
    background: #1488c8;
}
/* 마지막 아이템 */
#wrap div:last-child {
    flex: 2 2 0;
    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-8.css" />
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div></div><div></div><div></div>
</div>
</body>
</html>
cs



결과

플렉스 아이템을 1:1:2 비율로 크기 조절

 



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 화면 가로, 세로 구하기(pixcel, dpi, inch)  (0) 2016.08.29
반응형웹 목업 웹사이트 예제  (0) 2016.08.28
반응형웹 플렉스 아이템 배치 순서 바꾸기  (0) 2016.08.28
반응형웹 여러줄 플렉스 아이템을 교차축 방향으로 다양하게 배치하기  (0) 2016.08.28
반응형웹 교차축 방향으로 플렉스 아이템 개별 배치하기  (0) 2016.08.28

플렉스 아이템 배치 순서 바꾸기



플렉서블 배치 순서 바꾸기

order: 0(기본값) (플렉스 아이템에 적용)



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
@charset "utf-8";
/**
플렉서블 배치 순서 바꾸기
order: 0(기본값) (플렉스 아이템에 적용)
*/
/* 두번째 셋번째 첫번째 순으로 아이템 배치 */
/* 전체박스 */
#wrap {
    display: flex;
    width: 90%;
    height: 300px;
    margin: 0 auto;
    border: 4px solid #00f;
}
/* 플렉스 아이템 */
#wrap div {
    width: 33.3%;
}
/* 첫번째 아이템 */
#wrap div:first-child {
    order: 3;
    background: #eb4a24;
}
/* 두번째 아이템 */
#wrap div:nth-child(2) {
    order: 1;
    background: #1488c8;    
}
/* 마지막 아이템 */
#wrap div:last-child {
    order: 2;
    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-7.css" />
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div>1</div><div>2</div><div>3</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

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



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

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

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



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

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

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



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

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

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



플렉스 아이템 배치하기

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

미디어쿼리 예제 - 화면너비에 따라 구조 변경하기



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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@charset "utf-8";
/** 전체박스 */
#wrap {
    width: 90%;
    margin: 0 auto;
    border: 4px solid #000;
}
/** 서브박스들 */
#wrap div {
    display: inline-block;
    height: 100px;
}
/* 첫번째박스 */
#wrap div:first-child {
    background: #f45750;
}
/* 두번째박스 */
#wrap div:nth-child(2) {
    background: #40b0f9;
}
/* 세번째박스 */
#wrap div:nth-child(3) {
    background: #00d2a5;
}
/* 네번째박스 */
#wrap div:nth-child(4) {
    background: #ff884d;
}
/* 다섯번재박스 */
#wrap div:last-child {
    background: #464646;
}
/* 320px 이상 */
@media all and (min-width:320px) {
    #wrap div {
        width: 100%;
    }
}
/* 600px 이상 */
@media all and (min-width:600px) {
    #wrap div {
        width: 50%;
    }
    #wrap div:last-child {
        width: 100%;
    }
}
/* 1024px 이상 */
@media all and (min-width:1024px) {
    #wrap div {
        width: 20%;
    }
    /* 마지막 div 도 20%로 따로 설정해야 한다 그렇지 않으면 min-width:600px 의 조건문에 걸려 너비가 100%가 된다 */
    #wrap div:last-child {
        width: 20%;
    }
}
 
 
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="03-2.css" />
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div></div><div></div><div></div><div></div><div></div>
</div>    
</body>
</html>
cs



결과

 



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 플렉스 아이템 배치방향과 플렉스 아이템을 여러줄로 배치하기  (0) 2016.08.28
반응형웹 플렉서블 박스에 플렉스 아이템 가로방향으로 배치하기  (0) 2016.08.26
안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23
안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22
안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21

안드로이드 앱버전코드, 앱버전명 가져오기



앱버전코드, 앱버전명 설정

앱버전코드를 10, 앱버전명을 TEST_1.0.0 으로 설정



앱버전코드

ex) 10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    //앱버전 코드
    public int getAppVersionCode(){
        PackageInfo packageInfo = null;         //패키지에 대한 전반적인 정보
 
        //PackageInfo 초기화
        try{
            packageInfo = getPackageManager().getPackageInfo(getPackageName(), 0);
        }catch (PackageManager.NameNotFoundException e){
            e.printStackTrace();
            return -1;
        }
 
        return packageInfo.versionCode;
    }
cs



앱버전명

ex) TEST_1.0.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    //앱버전 명
    public String getAppVersionName(){
        PackageInfo packageInfo = null;         //패키지에 대한 전반적인 정보
 
        //PackageInfo 초기화
        try{
            packageInfo = getPackageManager().getPackageInfo(getPackageName(), 0);
        }catch (PackageManager.NameNotFoundException e){
            e.printStackTrace();
            return "";
        }
 
        return packageInfo.versionName;
    }
cs



결과


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 플렉서블 박스에 플렉스 아이템 가로방향으로 배치하기  (0) 2016.08.26
반응형웹 미디어쿼리 예제 - 화면너비에 따라 구조 변경하기  (1) 2016.08.24
안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22
안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21
반응형웹 미디어쿼리 예제  (0) 2016.08.21

+ Recent posts

티스토리툴바