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



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

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

+ Recent posts

티스토리툴바