Django 프로젝트 - CSS(Flexible Box) #3

• 기존 Style에서 radio 선택 버튼을 좀 더 보기 편안하게 수정할려고 했다.
• radio 선택 버튼을 수평 구조를 만들고 싶어서 'inline-block'을 활용했지만 변화가 없었다.
• 여러방법을 보다가 Flexible Box라는 속성을 활용하면 레이아웃을 쉽게 구성할 수 있다라고 나와있었다.
• Flexible Box 어떻게 작성할까?

<div style="display: flex; align-items: center;">

<div> 태그로 감사면 된다 간단.

 

---

• Flex는 요소의 크기가 불분명하거나 동적인 경우에, 각 요소를 정렬 할 수 있는 효율적인 방법을 제공
• Flex Container 속성은 다음과 같다.

속성	의미
display	Flex Container를 정의
flex-flow	Flex-direction 와 Flex-wrap의 단축 속성
flex-direction	Flex Items의 주 축(main-axis)을 설정
flex-wrap	Flex Items의 여러 줄 묶음(줄 바꿈 설정
justify-content	주 축(main-axis)의 정렬 방법 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items	교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

---

• display 속성으로 Flex Container를 정의한다.
• 표시 방법으로는 display: flex, display: inline-flex)로 표현한다.

값	의미
flex	Block 특성의 Flex Container를 정의
inline-flex	Inline 특성의 Flex Container를 정의

 

• 아래의 블로그를 참고해서 작성했으며 더 자세한 내용은 아래 블로그를 참고해보면 된다.
• https://heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드