[align-items ] vs [ align-content ]

display : flex  ;  flex-wrap: wrap ; flex-basis: 20% 적용

  1) flex 및 wrap, basis 적용 시 기본 적인 모습

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

 

align-items : center

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

 

 

align-content : center

 1) align-content는 한줄로 이루어진 플랙스 컨테이너(flex-wrap : no-wrap적용시)에는 아무 효과가 없음

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

align-items :end

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

 

align-content: end

 1) align-content는 한줄로 이루어진 플랙스 컨테이너(flex-wrap : no-wrap적용시)에는 아무 효과가 없음

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

 

align-items: start

 제일 처음 배치와 동일

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

align-content : start

 1) align-content는 한줄로 이루어진 플랙스 컨테이너(flex-wrap : no-wrap적용시)에는 아무 효과가 없음

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

	<style>
.flex6 .align6{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.flex6{  
	display: flex;
	border: 3px solid red;
  height: 150px;
	background-color: blue;
	flex-wrap: wrap;		
	/* align-items: center; */
	/* align-content: center; */
	/* align-items:flex-end; */
	/* align-content: flex-end; */
	/* align-items:start; */
	align-content: start;
}
.align6{
	border : 1px dotted red;
	font-size: 20px;	
	flex-basis: 20%;
	height : 30px;
	text-align: center;
	background-color: white;
}
    <style>
    
    
    <div class="flex6">
		<div class="align6">1</div>
		<div class="align6">2</div>
		<div class="align6">3</div>
		<div class="align6">4</div>
		<div class="align6">5</div>
		<div class="align6">6</div>
		<div class="align6">7</div>
		<div class="align6">8</div>
		<div class="align6">9</div>
		<div class="align6">10</div>
		<div class="align6">11</div>
		<div class="align6">12</div>
		<div class="align6">13</div>
		<div class="align6">14</div>
		<div class="align6">15</div>
	</div>