[CSS] display 속성 : block & flex

 

해당 게시글은 노마드코더: cssLayout 마스터 클래스를 수강하며 요약한 필기본입니다.

display 속성이란? 

위치를 제어하고싶은 태그의 부모 태그에서 설정하는 스타일 속성중 하나로 주로 반응형 웹을 제작할때 사용하는 속성이다.

 

display의 기본적인 설정은 block

• display 속성을 수정하지 않은 기본값은 block으로 설정되어 있는데,  이때 자식 태그들은 세로로 정렬하게된다.
• 이때 태그들의 width/height값이 존재해야한다는 특징이 있다.
• 여기서 inline-block을 주게되면 block(box)의 특징을 유지하면서 inline으로 정렬하게 된다.
• 이러한 block/inlineblock 은 반응형이 아닌 고정적이기때문에 크기조정시 디자인이 파괴될 우려가 있다,

display : flex

display 속성을 flex로 주게 되면 flex와 관련된 속성들로 안의 container들을 제어할 수 있게된다.

flex-direction 속성 (row / column)

main axis/cross axis를 정의하는 속성값으로 기본 값으로 row로 되어있으며 이때 main axis는 가로축이 설정된다.

flex-direction:row로 설정되어 있다면

justify-content 와 align-items 속성을 사용할 수 있게된다.

이때

justify-content

main axis 방향의 정렬 속성을 제어한다.

⁕ justify-content의 property  

align-items

cross axis 방향의 정렬속성을 제어할 수 있게 된다.

한줄내에서의 box의 스타일을 결정하는 속성이다.

**세로축 관련 설정을 할때는 height 속성을 반드시 설정해야한다.(높이가 없는 요소들에 설정을 줄수 없다는 개념적인 생각을 통해 추론할 수 있을 것같다.)

⁕ align-items의 property  

 

위에 속성들들은 부모태그에서만 설정할 수 있는 반면

자식태그에 줄 수 있는 속성도 있다.

align-self / order을 통해서 스타일을 주면 해당 자식에게만 속성이 들어간다. 

align-content

세로로 여러줄일때 줄들간의 관계를 설정하는 속성

flex-wrap

자식 box들의 배치는 기본적으로 한줄로만 배치되는데 이때 여러줄로 배치하기 위해서는 wrap 속성을 주면 가능하다.

•  flex-wrap : flex box들이 한줄에 올 수 있도록하는 속성(기본값은 nowrap)
   nowrap : 한줄에 오도록(자식의 width가 깨져도 괜찮음) 
   wrap : 자식의 width를 유지하도록(줄변경 ok) 

flex grow

• flex-shrink의 반대 개념
  element들이 얼마나 커질지를 정의하는 속성
  기본 값은 0
  줄어든 상태에서는 같은 크기로 변경
  여분의 공간이 있을시에 적용되는 속성이다.
  디폴트가 0이기 때문에 남은 여분공간을 가져간다.

 

flex shrink(flex wrap과 함께할 운명)

기본적으로 element를 정의한다.
만일 flex-wrap에서 nowrap으로 설정시 
줄어들 element의 비율을 설정할 수 있다.
설정 방법은 flex-shrink : 2; 처럼 
숫자를 주면 다른 element 대비 배수로 적용이 된다.
기본값은 1이다.

 

flex-basis

자식태그가 늘어나거나 줄어들기전  element에게 처음 크기를 부여하는 것이다.
처음 크기지만 실제크기는 아니다.(변하기 때문에)
기본적으로 main axis에 적용하는 속성이다.
(flex-direction:row 일때)
잘사용되진 않음 :width 속성으로 대체

flex-flow 

flex-direction 과 flex-wrap을 합쳐놓은 속성