CSS - layout ( flex, float )

flex - 기본 / grow & shrink

플럭스를 사용하기 위해서는 2단계의 태그가 필요하다.

li태그가 반드시 ul이나 ol같은 태그를 필요로 하듯이 정렬하고자 하는 item들은 그 부모에 해당하는 container가 필요하다.

container의 역할을 하는 태그와 item 역할을 하는 태그들이 필요하다. 

 

Container 에 부여해야하는 속성

• display
• flex-direction
• flex-wrap
• flex-flow
• justufy-content
• align-items
• align-content

 

Item 에 부여해야하는 속성

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

 

예시

.item:nth-child(2)

는 class명이 item인 element 중에서 두 번째 순서에 해당하는 element를 선택하게 된다.

해당 엘리먼트에 효과를 적용시키면 왼쪽 화면처럼 출력된다.

 

 

flex-basis 는 flex의 방향에 해당하는 element의 기본크기를 설정하는 것이다. 만약 flex-direction: column; 이면 높이, flex-direction: row; 면 너비가 된다. 

 

 

 

flex-grow: 1; 은 flex들의 위치한 공간을 1:1:1...로 나누어 위와 같이 화면을 출력한다.

만약 .item: nth-child(2)에 flex-grow 값을 2로 주면  cascading으로 인해 이 코드가 우선순위를 갖게되어 아래처럼 1:2:1:1:1 비율로 공간이 분할된다. 

 

 

 

flex-shrink 는 화면크기가 줄어들었을 때, element들의 크기가 줄어드는 것을 조절하는 attribute이다. 

flex-shrink가 0이면 화면이 줄어들어도 해당 element의 크기는 감소하지 않고 다른 element들이 스크롤에 의해 사라지게 된다.

반면 flex-shrink가 1이면 화면이 줄어듬에 따라 해당 element도 다른 element와 화면이 줄어드는 만큼 자신의 크기를 줄인다.

 

 

만약 위 코드에서처럼 첫번째 element의 flex-shrink는 1, 두번째 element의 flex-shrink가 2이면 화면에 줄어듬에 따라서 두번째 element가 첫번째 element의 2배만큼 더 빨리 줄어든다. 

 

 

 

flex - holy grail layout

 

 

Properties for the flex container

플럭스 속성에 따른 화면분할 확인하기

 

 

 

float

float 속성은 글의 본문 안에서 이미지를 삽입할 때 이미지를 자연스럽게 삽입하기 위해 사용하는 기능이다.

뿐만 아니라 layout을 잡을 때도 사용하기도 한다.  

이미지의 위치를 지정할 수 있다. 

 

float를 위 그림처럼 공간을 띄운다고 생각하면 이해하기 쉽다. 다만 block level의 요소는 float 속성을 가진 요소 밑의 공간에 들어갈 수 있지만, inline level의 요소는 float 의 아래 공간에 들어갈 수 없다. 

따라서 아래처럼 inline 요소인 text는 float 속성을 가진 image 밑으로 들어가지 못하고 이미지 옆에 나타나게 된다. 

 

예시

 

 

두번째 예시에서는 style="clear:both;" 속성을 이용하여 두번째 p태그에서는 img태그의 floating을 무시하도록 설정하였다. both 뿐만 아니라 left, right를 통해 한쪽의 floating만 무시할 수도 있다. 

 

 

 

Multi column

column-count: (Number);            →    number만큼 column을 만든다.

column-width: (Number);            →    화면을 number 크기만큼 단을 나눈다.

column-gap: (Number);              →    column 사이의 간격을 조절한다.          

        

column-rule-style: (solid/dotted/dashed)                    →    column 사이 간격에 줄을 만들 수 있다. 

column-rule-width: (Number)                                  →     column 사이 간격의 선의 너비를 조절한다.

column-rule-color: (color)                                       →     간격선의 색을 설정할 수 있다.

 

column-span: all;                       → 해당 element는 컬럼에 구애받지 않게 할 수 있다.