우드의개발개발

부모 컨테이너(flex 지정) 안 자식 요소 프로퍼티로 flex-basis는 flex-grow와 flex-shrink 조합에 따라 여러 의미를 갖는다. flex-grow가 자식 요소간의 비율 및 커지는 속도를 결정했고 flex-shrink가 화면 크기를 줄일 때 줄어드는 속도를 결정했다. 특히 flex-grow가 0으로 쓸 경우 더이상 커지길 원치 않는다라는 의미로 쓰이고 flex-shrink가 0으로 쓸 경우 더이상 줄어들기 원치 않는다의 의미로 쓰인다. flex-grow를 양수로 주고 flex-shrink를 0으로 줄 경우 더이상 줄어들기 원치 않음을 의미하므로 flex-basis의 의미가 mini-width 의미로 쓰인다. 최소의 가로 크기(초기값) 의미로 사용한다. 반대의 경우 flex-grow를..

부모 컨테이너 안에 여러 자식요소가 있다고 했을 때 화면 크기를 줄일 경우 자식 요소가 줄어드는 속도를 지정할 수 있다. 이 때 사용하는 속성이 flex-shrink이다. 값이 클수록 줄어드는 속도도 빠르다. 0일 경우 자식 요소에 텍스트가 있을 때 텍스트가 차지하는 비율 이상으로 줄어들지 않는다.

flex-grow 부모 컨테이너 안에 있는 자식 컨테이너 간의 비율을 조정할 수 있다. navigation 바의 로고 이미지와 네비게이션 탭 간의 크기 비율을 설정할 때 유용한 프로퍼티가 될 수 있다. .box:first-child { background-color: tomato; flex-grow: 2; } .box:last-child { background-color: teal; flex-grow: 1; } 예를 들어 하나의 컨테이너 안에 2개의 자식 요소가 들어가있다고 했을 때 위와 같이 flex-grow에 설정을 주면 2:1의 비율로 설정된다. flex-grow의 기본값은 0이다.

.box:nth-child(3) { background-color: blueviolet; order: 2; } .box:nth-child(6) { background-color: aqua; order: -1; } 부모 컨테이너 안 18개의 자식 요소가 있을 때 오름차순으로 각 상자에 번호를 매겼다. 컨테이너 안의 특정 자식 요소에 순서를 지정할 수 있는데 그 때 사용하는 속성이 order이다. 위의 그림은 6번째 박스에 order:-1을 부여하였고 3번째 박스에 order:2를 부여하였다. 기본적으로 컨테이너 안의 자식 box의 순서는 0이고 번호가 낮을수록 우선순위가 높다.

align-items 가로 세로 200px 상자 18개를 한줄에 배치하려고 하였으나 flex-wrap에 wrap 속성을 주어서 상자 본연의 크기를 유지하기 위해 한 줄이 더생기고 상자 9개가 배치되었습니다. 이 때 부모 요소(컨테이너)에 align-items: center; 를 부여할 경우 y축으로 space-around에 대한 속성이 부여됩니다. align-content 가로 세로 200px 상자 18개를 한줄에 배치하려고 하였으나 flex-wrap에 wrap 속성을 주어서 상자 본연의 크기를 유지하기 위해 한 줄이 더생기고 상자 9개가 배치되었습니다. 이 때 부모 요소(컨테이너)에 align-content: center; 를 부여할 경우 y축으로 justify-content: center; 속성이 적..

flex-flow flex-direction과 flex-wrap 속성을 한번에 지정할 수 있는 프로퍼티이다. flex-wrap은 자식 요소에 가로 세로 크기(200px, 200px)가 있을 때 해당 개수가 많아져 모두 한줄에서 표현할 수 없을 경우 이를 처리하는 방법을 결정하는 프로퍼티이다. no-wrap의 경우 한줄에서 표현할 수 없을 경우에도 한줄로 표현하여 지정한 자식크기가 변경이 된다. wrap의 경우 한줄에서 표현할 수 없을 경우 여러줄에 걸쳐 나누어서 표현하여 자식 크기를 온전히 표현한다.

flex-direction .father { display: flex; flex-direction: row; } 부모 요소에 display: flex; 속성을 지정한 경우 자식 요소의 위치를 결정 짓는 주요 축을 결정할 수 있다. x축 또는 y축을 지정할 수 있는데 기본축은 x축이다. flex-direction row; column을 값으로 지정할 경우 자식 요소를 y축을 기준으로 배치한다.

justify-content .father { display: flex; justify-content: center; } 부모 요소(컨테이너)에 display: flex; 속성이 있을 때 justify-content를 사용하면 부모 아래 있는 자식 요소의 x축(가로축)의 위치를 지정할 수 있다.