Flexbox

css

display : flex;

the flex model


main axis - 본 축 왼쪽에서 오른쪽으로 정렬

cross axis - 교차 축 위에서 아래로 정렬

Flex-Direction

컨테이너 안에서 본축 방향을 결정

flex-direction : row-reverse = 본축의 방향이 반대로 바뀜

flex-direction : column = 본축의 방향이 상하로 바뀜

Justify Content

주축을 기준으로 정렬

justify-content : space-between, center, flex-end, space-around, etc.

Flex-Wrap

주축이 수평일때는 새로운 행을 만들어 요소를 정렬하며

주축이 수직일때는 새로룬 열을 만들어 요소를 정렬하는 속성

간단히 말해서 선을 한줄로 둘것인지 여러 줄을 쌓을 것인지 하는 것

wrap, reverse, now warp = 교차 축(cross axis)의 변화

Align

Align-Items = 교차축을 기준으로 items가 정렬된다

flex-start ,center,flex-end,etc.


Align-Content = 교차축을 기준으로  (두 줄 이상 일때) 라인 자체가 정렬된다



Align-self = 개별적인 요소에 적용할 때 사용

ex) div:nth-of-type(2) { align-self:center;}

Flex

Flex-Basis = 요소의 최초 크기 지정

Flex-Grow = 이용가능한 공간 분배를 지정

Flex-Shrink = 다른 요소에 비해 차지하는 공간의 비율을 줄이는 설정



Flex 속기

flex:  2     2    10%
     grow shrink basis

flex : 2
     grow
     
flex :10em
      30%
     basis

Responsive Design
사용자의 여러 환경에 맞게 제작

Media Queries

css에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다.

@media (max-width:800px) (min-width:600px) 
{
    h1 {
        color: purple;
       }
}