HTML11강 - flex요소 (세로가 아닌 가로로배치하기)

🟰display : flex( 가로로 정렬하기)

☀️내부 요소를 세로로 정렬이 아닌 가로로 정렬한다.

code pen을 통해 상세한 요소들을 소개하겠습니다.
0.25배로 축소해서 보시면 감사하겠습니다.

See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.

1. div로 틀을 만들고 그안에 내용을 flex를 통해 가로로 정렬해준다.
2. flex-flow라는 속성을 통해 div로 만든 넓이를 초과할 경우 다음 줄로 넘어가게 해준다.
3. justify-content 라는 스타일 속성을 통해 자동으로 넓이 조정이 가능하다.
4. justify-content에는 space-between(간격을 최대한 벌림) / space- around / space-evenly (around와 evenly는 적절히 벌려줌)

📌가지런하고 보기좋게 정렬을 하고 싶을 때는 공통 클래스를 적용해서 padding과 margin을 통해 여백을 조정해줍니다.
📌만약 틀안에 내용들이 밖으로 탈출한다면 width속성과 box-sizing: border-box를 적용해보시기 바랍니다. width가 지정되지 않으면 충돌이 생길 수 있습니다.