flex의 용도를 전면적으로 이해하다

1. flex를 이용하여 한 div를 다른 div 안에서 수평으로 수직으로 배치할 수 있다
예: html 코드:

<div class="container">
	<div class="box">

	</div>
	</div>

css 코드:

.container{
	width:600px;
	height:400px;
	border:1px solid blue;
	display: flex;
	justify-content:center;
	align-items:center;
	}
	.box{
	width:200px;
	height:100px;
	border:1px red solid;

ps:이렇게 하면 수평 수직으로 가운데에 들어갈 수 있어요.
2. flex의 속성

<div class="items">
	<div class="item">1</div>
	<div class="item">23</div>
	<div class="item">4</div>
	</div>

items에 쓸 수 있는 속성은 여섯 가지입니다.
•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content
item에 쓸 수 있는 것은 6개입니다.
•order//이것은 item 단독으로 주는 것입니다. 그 item의 순서를 바꾸려면 이 속성을 그 item에게 주십시오
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self
다음은 flex의 용도에 대한 전면적인 이해를 위한 에피소드입니다. 많은 응원 부탁드립니다~