두 가지 CSS 문제 해결 - display flex, 요소 가운데정렬

1.

요소를

양 끝으로 위와 같이 배치 하고자 했다.

display flex 에 대한 이해가 부족했던 이유였다.

• flex를 배울 수 있는 사이트: https://flexboxfroggy.com/#ko 사이트를 참고했다.

forum 과 글쓰기 버튼을 하나의 div 안에 묶어놓은 후,

해당 div의 css 속성을 다음과 같이 지정 해 주었다.

먼저 display: flex; 를 써 주고

justify-content: space-between; 속성을 지정해 주면 요소의 개수에 따라서 같은 간격으로 꽉 채워져서 표시됨.

 

2.

페이지 안의 모든 요소를 가운데 정렬 하고 싶다면?

최상위 div에서 margin: auto; 를 해 준다.