Flex 속성

이번에 인스타그램 코딩을 하면서 flex 속성이 얼마나 소중한지 알 수 있었다..
강의 들을때만해도 엄청 외우기 어려운 속성정도로만 생각하고 넘어 갔는데 전혀아니였다

그래서 주로 쓰이는 flex 속성에 대해 정리해보기로 했다

flex 속성의 형태

.flexBox{
  display:flex;
  속성 : 값;
}

flex-direction

• row - 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse - 요소들을 텍스트의 반대 방향으로 정렬
• colum - 요소들을 위에서 아래로 정렬
• colum-reverse - 요소들을 아래에서 위로 정렬
  
  
  

justify-content

• start - 요소들을 왼쪽으로 정렬
• end - 요소들을 오른쪽으로 정렬
• center - 요소들을 가운데로 정렬
• space-between - 요소들 사이에 동일한 간격을 둔다
• space-around - 요소들 주위에(margin) 동일한 간격을 둔다
• space-evenly - 요소들 사이의 간격들이 동일한 간격을 가진다

align-items

• flex-start - 요소들을 꼭대기로 정렬
• flex-end - 요소들을 바닥으로 정렬
• center - 요소들을 세로선 상의 가운데로 정렬
• baseline - 요소들을 시작 위치에 정렬
• stretch - 요소들을 컨테이너에 맞도록 늘린다