Flex-wrap

 

 

1. 기본적인 display: flex 적용 시 모습

 1) 가로로 정렬 됨

    - flex-direction :row 가 기본값

 2) content의 너비 만큼 폭이 결정 

    - 1~5의 요소마다 폭이 다름

 

1

2

3

4

5

2. flex-basis: 50% 적용 시 모습

1)개별요소당 브라우저 전체 너비의 50%를 적용 하였으나 flex 속성상 1줄에만 표기됨

2)현재 상태는 각자 전제 너비의 20%만 적용 됨

 

1

2

3

4

5

3. flex-wrap: wrap 적용 시 모습

1) 브라우저의 폭을 넘기면 다음줄로 넘어 감.

   - 현재 요소의 크기가 flex-basis: 50% 로 적용 되어 1줄에 2개씩 표현이 된 상태.

2) flex를 적용한 요소에 적용 하여야 한다 ( flex-basis 가 적용 된 부모요소에 적용 = flex를 적용한 요소에 작성)

(배경색 글자색은 시각적으로 잘보이게 하기 위해 변경 한 것이므로 숫자의 위치와 폭을 보면 된다.)

1

2

3

4

5

 

 

	<div class="flex">
		<div class="items">1</div>
		<div class="items">2</div>
		<div class="items">3</div>
		<div class="items">4</div>
		<div class="items">5</div>
	</div>

	<style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }

        .flex{
            display: flex;
            border: 3px solid blue;
          /* justify-content: center;
            align-items: center; */
            height: 100vh;
            flex-wrap: wrap;

        }
        .items{
            border : 1px dotted red;
            font-size: 40px;	
            flex-basis:50%;	    
        }
	<style>