display: flex;
정의
박스와 아이템들을
행또는열로자유 자제로 배치 시켜주는 속성이다.
- 예전에는
float을 사용해 짜맞추기식 레이아웃을 했었다. float은 이미지와 텍스트를 어떻게 배치하기 위한 속성인데 이미지 대신 박스를 사용했었다. 순수 목적에 어긋나는 행동이었다.
개념 ⭐⭐
- 부모 컨테이너에 적용되는 속성 값과 아이템들에 적용되는 속성 값이 따로 존재한다.
- flexbox에는
중심 축과반대 축이 있다.중심축에 따라 수직 축이 중심축이면수평 축이 반대 축이다.
속성 ⭐⭐
부모 container와자식 container는 각각의 속성을 가지고 있다.
- 부모 container
flex-direction 은 수평을 중심축으로 할지 수직을 중심축으로 할지 결정⭐
flex-direction: column; // 아이템을 세로로 정렬 (위에서 아래)(기본 값)
flex-direction: row; // 아이템을 가로로 정렬 (오른쪽에서 왼쪽으로)
flex-direction: column-reverse; // 아이템을 세로로 정렬 하지만 반대로 (아래에서 위로)
flex-direction: row-reverse; // 아이템을 가로로 정렬 (왼쪽에서 오른쪽으로)
flex-wrap: nowrap; // 만약 아이템들이 많아진다면 자동적으로 한 줄에 빼곡하게 붙어있다.(기본 값)
flex-wrap: wrap; // 아이템들이 많아진다면 자동적으로 다음 줄로 넘어간다.
flex-wrap: wrap-reverse; // 거꾸로 위에서부터 반대로 다음 줄로 넘어간다.
flex-flow: column nowrap; // flex-direction 과flex-wrap 을 한 번에 작성할 수 있다.
justify-content 는 중심축에서 아이템들을 어떻게 배치 할 건지 결정
justify-content: flex-start; // 처음부터 왼쪽에서 오른쪽이나 위에서 아래로 배치한다는 의미, 순서는 유지된다. 몸 그대로 유지
justify-content: flex-end; // 처음부터 오른쪽에서 왼쪽이나 아래에서 위로 배치한다는 의미, 순서는 유지된다. 몸 그래도 유지
※flex-direction: column-reverse; 는 아래에서 위로 정렬되면 순서도 아래에서 위로 정렬
justify-content: center; // 아이템들을 센터로
justify-content: space-around; // 박스를 둘러싸게 space를 넣어준다. 사이드에 있는 아이템들은 space가 작다.
justify-content: space-evenly; // 똑같은 간격의 space를 넣어준다.
justify-content: space-between; // 왼쪽과 오른쪽 끝은 화면에 맞게 붙여두고 나머지에 space 넣어줌
align-items 는 반대축 에서 아이템들을 어떻게 배치할지 결정
align-items: center; // 반대축을 기준으로 중앙으로 배치
align-items: baseline; // 텍스트의 위치가 padding때문에 바뀌게되면 다른 텍스트의 위치에 맞춰주는 것
align-content: space-between; // row기준으로 위와 아래는 딱 붙어있고 중앙과의 거리를 일정하게 배치
align-content: center; 중앙으로 아이템들이 배치된다.
- 자식 container
order: 0; (기본 값) 아이템들의 순서를 바꿀 때 사용, 거의 사용 안됨
⭐flex-grow: 0;(기본 값) // 아이템이 원래의 사이즈를 유지하다가 컨테이너가 작아지면 한줄에 꽉차게 되면서 작아지는 것을 예방하기 위해 사용
컨테이너 안에 빈 공간이 있을 때, 아이템을 얼마나 늘릴지 비율을 설정하는 것
모든 아이템의 flex-grow 값을 합산한 후, 각 아이템이 그 값에 비례해서 빈 공간을 나눠 가지게 됩니다.
⭐container크기가 늘어날 때 일정한 비율을 가지고 있게 해주는 속성 값 줄어들 때는 원래의 값으로 돌아가면서 작아진다.
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 1;
}
.item3 {
flex-grow: 1;
}⭐flex-shrink: 0; //컨테이너가 작아졌을 때 어떻게 행동가는가 결정 (기본 값)
⭐container크기가 줄어들 때 일정한 비율을 가지고 있게 해주는 속성 값
⭐ grow 와 shrink 는 container의 크기가 바뀌었을 때 아이템들이 얼마나 늘어나고 줄어드는가를 결정해주는 속성 값
⭐flex-basis: auto; (기본 값 ) 아이템들이 공간을 얼마나 차지 해야하는지 세부적으로 조절가능, grow 와 shrink 를 사용하지않고 고정적으로 비율을 지정해주는 속성 값
align-self: center; // 아이템 각각을 배치 시킬 수 있는 속성, 컨테이너에 지정된 것을 벗어날 수 있다.
하루를 마치며
오늘은 프로그래밍 기초 주차가 시작되었다. 자바스크립트에 대해서 공부하고 과제를 해결하는는 주차이다. 1주차 강의를 들으면서 튜터님의 타이핑 속도가 너무 빨라 따라가기 힘들었고 따라 쳐보는 것에 집중하다보니 튜터님의 말씀을 잘 못듣는 현상이 일어났다. 이를 줄이기 위해 메모장에 튜터님의 말씀을 적으면서 코드를 따라치는 방식으로 진행하고있다. 메모장에 적은 것들은 어느 정도 강의를 듣다가 개인노션에 정리를 하고있다. 끝까지 듣고 정리 하기에는 속도감이 빠르고 이 전에 했던 것들이 생각나지않기 때문에 중간중간 정리하고있다. 이번주 다음주가 앞으로를 위해 가장 중요하다. 비록 힘들지만 이 캠프를 끝까지 완주하려면 꼭 거쳐야하기 때문에 이악물고 할 것이다.
