Flexbox 연습

html

	<nav class="container">
		<div class="home">Home</div>
		<div class="search">Search</div>
		<div class="logout">Logout</div>
	</nav>

css

        html, body {
			background-color: #ffeead;
			margin: 10px;
		}
		.container > div {
			padding: 10px;
			text-align: center;
			font-size: 2em;
			color: #ffeead;
		}
        .home {
			background-color: #96ceb4;	
		}
		.search {
			background-color: #ff6f69;
		}
		.logout {
			background-color: skyblue;
		}
		.container {
			border: 5px solid #ffcc5c;
		}

1. 컨테이너에 display:flex;

flex 사용시 디폴트로 가로로 정렬(왼쪽에서 시작)

2. justify-content: ?; 가로 정렬!

3. margin-?: auto;

4. flex : 1; 각각의 아이템에 적용

5. order : 번호 ; 순서를 정한다.

6. flex-wrap : wrap; 디폴트 no-wrap

예제) 동물 사진첩 flex로 만들기

  <h1>Life in the Wild</h1>
  <div class="container">
    <img src="https://source.unsplash.com/800x450/?animal" alt="">
 </div>

참고
https://awik.io/generate-random-images-unsplash-without-using-api/