[U1S6] HTML/CSS 활용

 

Flexbox

---

Flexbox란? flex는 유연한, 잘 구부러지는 이라는 뜻으로 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법을 말한다.

 

✏️ 부모에 적용해야 하는 flexbox 속성

• display: flex : 자식 박스의 방향과 크기를 결정한다.
• flex-direction : 정렬 축을 정한다. 값으로는 row(기본값), column, row-reverse, column-reverse가 있다.
• flex-wrap : 하위 요소의 크기가 상위 요소의 크기를 넘으면 자동으로 줄바꿈을 할 것인지 여부를 결정한다. 값으로는 nowrap(기본값), wrap, wrap-reverse가 있다.
• justify-content : 축의 수평방향 정렬 방법을 결정한다. 값으로는 flex-start, flex-end, center, space-between, space-around가 있다.
• align-items : 축의 수직방향 정렬 방법을 결정한다. 값으로는 flex-start, flex-end, center, space-between, space-around가 있다.

 

✏️ 자식에 적용해야 하는 flexbox 속성

flex : flex: grow(팽창 지수) shrink(수축 지수) basis(기본 크기)로 표현 가능하며, flex-grow와 같은 방법으로 따로 값을 지정가능하다. (기본값 0, 1, auto)

• grow : 박스 안에서 각 요소가 차지하는 비율을 결정한다.
• shrink : 박스의 크기가 줄었을 때 각 요소가 줄어드는 비율을 결정하지만 잘 사용되지는 않는다.
• basis : 요소가 늘어나거나 줄어들기 전의 기본 크기이다.