[CSS] flexbox, order

✅ flexbox

• 과거에는 inline-block을 통해 block으로 된 요소를 inline으로 배치했고 간격도 일일이 조정해줬음
• 그러나 화면마다 비율이 다 달라서 완벽한 배치를 하기가 어려웠음
• 이를 보완하기 위해 등장한 것이 flexbox

✔ flex 속성

• 배치를 하고자 하는 속성과 붙어있는 부모에 display: flex; 속성을 줘야 한다.
• 즉 flex 속성을 사용하기 위해서는 flex container 역할을 하는 것이 필요하다는 것
• main axis : 주축, cross axis : 교차축
• 디폴트 설정은 가로가 주축
  
  사진: https://www.habonyphp.com/2020/02/css-flexbox-1-3.html
• flex-direction을 통해 주축을 가로방향 또는 세로방향, 가로 역방향, 세로 역방향으로 변경할 수 있음

✔ justify-content, align-items

• justify-content : 주축의 방향 설정
• align-items : 교차축의 방향 설정

✔ align-self

• 역할은 align-items와 같음
• 지정한 요소에만 적용됨
• 부모가 아닌 자식에 직접 적용해야 함

.father {
  display: flex;  
}

.child {
  align-self: center;
}

✅ order

• 요소의 배치순서
• 디폴트는 0
• 참고: order 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 화면에 보이는 순서에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다. (MDN)