728x90
반응형
저번에는 float를 사용하여 div 를 가로정렬하는 포스팅을 했었다.
그런데 내가 프로젝트 할 때는 float말고 flex를 사용하고 있다.
가로로 정렬할 div 태그들의 부모 태그에 CSS 속성으로
display:flex;
flex-direction:row;
를 주면 가로로 아이템들이 정렬된다.
flex로 정렬된 아이템들을 원하는 기준으로 정렬하는 여러가지 방법들이 있다.
직접 눌러보고 화면으로 보면 쉬우니 둘러보자 ~~~~~~~~~~
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justify-content - CSS: Cascading Style Sheets | MDN
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
developer.mozilla.org
728x90
반응형
'Front > CSS' 카테고리의 다른 글
| [css] 다양한 버튼 디자인 참고 (0) | 2022.05.29 |
|---|---|
| [css] 투명색 코드 (0) | 2022.05.17 |
| [CSS] div 가로 정렬 하기 -float (0) | 2022.04.05 |
| [CSS] position 속성 (0) | 2022.03.27 |
| [CSS] outline-offset (0) | 2022.03.25 |