[FE] CSS 정리 : display / align-items / justify-content / box-sizing

display: flex;

• 내용물의 width 만큼만
• flex 아이템들은 가로방향으로 배치(마치 inline요소처럼) 
  • 줄바꿈 되는건 wrap이나 그런 속성으로 컨트롤 할 수 있음
• height은 컨테이너의 높이만큼 늘어남(컬럼의 높이가 자동으로 쫙 맞음)

 

align-items: center;

• 수직축 방향으로 끝까지 쭈욱 늘어남
• stretch 위아래로 쭈욱 늘어남
• center 위아래수직을 기준으로 중간에 배치됨. 세로를 기준으로 중간에 배치됨.

 

justify-content: center;

align-item: center;

을 해주면 아이템을 상하좌우 한가운데 배치할 수 있음

 

 

box-sizing:border-box;

index.css에 아래와 같이 코드를 한 이유?

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성

width height는 엘리먼트의 컨텐츠의 크기를 지정함.

따라서 테두리가 있으면 테두리 두께로 인해서 원하는 크기 찾기 어려움

box-sizing을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있어서 예측하기 쉬움!

*{
  box-sizing:border-box;
}

아래 사이트에서 자세한 설명을 볼 수 있음.

 

box-sizing: content-box; 를 하면 

padding border같은 속성을 주게되면 width height 값에 그게 더해져서 실제 설정한 width height값보다 더 크게 나타남

아무런 값을 안주어도 content-box가 디폴트 값이다.

 

그래서 

최상위 css에서 위 소스 코드처럼 전체에 box-sizing:border-box;를 해줘야한다.

그래야 width 가 50%인 컨테이너가 있으면

padding border shadow등의 속성 값이 더해지더라도 실제로 그 브라우저의 50%의 사이즈가 되는 것이다.

 

 

CSS box-sizing 속성 - ofcourse

 

 

 

 

*출처:

box-sizing - 생활코딩

 

이번에야말로 CSS Flex를 익혀보자