## 4월 3일 프론트 엔드 6일차 , flex 링크

###개념 - 트랜지션

float 고정 기능 공식
float요소의 부모에 주면 해결된다 -라이브러리-
.row::after{
content:"";
clear:both;
display:block;
}

###flex 익히기

플렉스는 자식한테만 영향을 줌
자기 x 자손 x

플렉스 명령어들

```
justify-content - Flex 요소들을 가로선 상에서 정렬합니다.

> flex-start (default) flex-end center space-between space-around space-evenly

align-items - Flex 요소를 세로선 상에서 정렬합니다.

> flex-start flex-end center baseline stretch (default)

flex-direction - 정렬할 방향을 지정합니다. 행 , 열

> row (default) row-reverse column column-reverse

order - Flex 요소의 순서를 지정합니다.

> <integer> (... -1, 0 (default), 1, ...)

align-self -지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬합니다.

> flex-start flex-end center baseline stretch

flex-wrap - Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다

> flex-start flex-end center baseline stretch

flex-flow -

> 다음의 속성들을 간략히 한 속성입니다: flex-direction and flex-wrap.

<flex-direction> <flex-wrap>

align-content - 세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절합니다.

> flex-start flex-end center space-between space-around space-evenly stretch (default)
```

fontawesome -> 아이콘즈

 

https://flexboxfroggy.com/#ko 개구리 flex 연습 사이트 직관적이다.

 

https://codepen.io/enxaneta/pen/adLPwv flex 적용해보기