Flex
- Flex설정을 위해서는 wrapper div 에 height 가 필요하다
- Flex direction 은 기본적으로 row(가로) 방향이므로 column(세로)으로 설정하고 Flex-direction:column; 설정을 해주자.
-
justify-content/ align-items /align-self를 이용하여 각각 세부 요소들을 요리조리 옮기면 된다.
(center, flex-end&start, space-between&around&evenly etc..)
(self는 child items 는 father 용) - *나는 개인적으로 세부사항을 flex를 사용하고 큰 틀은 grid를 이용하였다
- flex- wrap: wrap을 사용하면 flexbox에게 child의 설정크기를 유지하라고 명령하게 됨. reverse도 있음.
- box사이의 간격이 있는데 이곳을 줄이거나 늘리고 싶으면 align-content를 사용하면 된다.
- flex box에서 flex shrink: n; 을 사용하면 nowrap상태에서 화면이 줄어들때 n배만큼 해당 속성이 줄어들게 된다. 기본값 1
- flex-grow: 기본값은 0 이며 남아있는 공간을 가져오게 됨. 그니까 화면 확장했을때 여분의 공간을 가져오고 화면이 좁아지면 다시 본래 크기로 가게됨. 1이나2면 충분.
- flexgrow는 박스주변 여분공간을 가져간다! 반응형 디자인시 아주 유용하당.
- flex-basis 는 main axix에서 발생함. 기본값인 row에서는 horizental로 일어날것. -> main axis sizing column이라면 완전 이야기가 달라질껄 -> width로 대체 가능함..
Grid
- 기본적으로 격자식 배열이 기본 개념이다(이름에서 보이듯)
flex로 격자배열 만들기 까탈스러워서 생겼다고 한다.
- grid 박스의 규칙은 거의 flex랑 비슷한데 일단 왠만한 설정은 father에서 해야함.
- grid-template-columns: 250px 250px 250px; -> 만들고 싶은 column 갯수만큼 각 크기 적어주면됨 여기서는 250px 컬럼 3개만든거
- grid-column-gap: 10px; -> column방향의 gap 10px;임
- row-gap: 10px; ->row방향의 gap 10px; 임.
- height를 설정해주지 않으면 fontsize만큼의 크기만 생성된다.
이렇게 될 경우 child에 각각 크기 설정보다 father에게 grid-column-rows:100 300 200px; 처럼 각 column의 크기를 설정해주면 된다. - father인 grid에 설정을 안해주면 밑에 child에게 아무리 설정해도 아무것도 안나타난다
- grid의 장점은 직관적으로 template을 짤 수 있따는 것인데 아래와 같다
grid-template-columns: 200px 200px 200px 200px; 이거 노답임 - > repeat함수가 있음 -> grid-template-columns: repeat(4, 200px); grid template area를 사용해서 시각적으로 페이지를 디자인 가능하게 함 근데 child의 각 해당 클래스 또는 id 에 grid area로 설정한 이름과 동일해야 father에서 적은게 적용됨 grid-template-areas: "header header header header" "content content content nav" "content content content nav" "footer footer footer footer" ; .header{ background-color: darkgreen; grid-area: header; ->명칭 스트링으로 하면 안됨 :).. 이렇게 하면 페이지 레이아웃을 간단하게 만들 수 있음. grid-template-columns: repeat(4, 200px); ->grid-template-columns: auto 200px;로 하면 화면 전체를사용하게 됨.
row와 column의 값을 동일하게 넣으려면 그냥 gap:10px 해도 된다.
알고리즘 풀이를 담은 블로그입니다.