[CSS]FLEX 기초2

[CSS3] 레이아웃 flex 이용하기

이글을 정리할때는 뭔가이해가 안갔는데

이제 어떻게 써야할지 알거같아서 다시 정리!

 

.box{
    text-align: center; 
    height: 10vh; 
    flex-grow: 1; 
    flex-shrink: 1; 
    align-content: center; 
    justify-content: center;
    flex-basis: 300px;
} 
.box-1{
    background: hotpink; 
    flex-grow: 0; 
}
.box-2{
    background: purple; 
    flex-shrink: 0;
}
.box-3{
	background: blueviolet; 
    flex-grow: 0;
    flex-shrink: 0;
}
.box-4{
background: plum; 
}
.box-5{
background: blue; 
}
.box-6{
    background: skyblue; 
}
.box-7{
    background: green; 
}
.box-8{
    background: greenyellow; 
}
.box-9{
    background: yellow; 
}
.box-10{
    background: orange;
}

위와같이 속성의 값을 주었을때 

기본적으로 

flex-grow : 1;

flex-shrink : 1;

을 통해서 크기가 줄어들고 늘어나는 것을 허용했다. (숫자의 크기가 커질수록  크기가 줄어들거나 커지는 비율이 커짐)

 

flex-grow : 0; 을 주면 flex-basis 의 크기 300px에서 더이상 커지지 않는다

flex-shrink : 0;을 주면 flex-basis 의 크기 300px에서 더이상 줄어들지 않는다. 

 

 

.box-1 은 화면 크기가 커지더라도 300px 고정이고 

.box-2는 화면 크기가 줄어들어도 300px 고정이고 

.box-3는 화면 크기에 상관없이 항상  300px 고정이다.

 

화면크기별로 보면

 

맨왼쪽 사진은 브라우저 크기가 920px로 300px 의 box가 3개 올수 있다. (flex-wrap:wrap;)

 

1과3 은 300보다 커지지 않도록 했기대문에 현재 300px 이고

2는 화면크기에따라 커지도록 허용했기때문에 크기가 늘어나 300px보다 커졌다

10번은 혼자 한줄을 차지하기 때문에 그에 맞게 커졌다. 

 

화면이 조금 줄어들었을때

가운데 사진으로 브라우저 크기가 500px 정도인데,  한줄에 한개씩 위치할 수 있고, 

1과 3은 여전히 300px을 유지한다 나머지들은 자신의 위치에 공간에 맞게 크기가 조절되고 있다.

 

화면이 300px보다 줄어들었을 때 

 

자세히보면 2,3은 300px을 유지하고 있어 숫자의 위치가 다른것을 알 수 있다. 

 

아래에서 직접확인해 볼 수 있다.

 

 

 

 

 

 

 

 

 

그렇다면 

flex-grow / flex-shrink 의 값의 크기 차이는 무엇인가..

 

이때는 

flex-wrap:wrap;을 쓰면 제대로된 결과를 확인 할 수 없다.

 

 

한줄에서 차지하는 비율과 같기때문에.. 

다음줄로 넘어가면 그 좌우 공간을 자신이 갖고 거기에 맞게 커지기 때문에 비율을 확인할 수 없다.. 

 

그래서 아래 예제는 

flex-wrap: nowrap; 으로 다음줄로 넘어가지 못하도록 했다.

 

flex-basis 의 크기 100px을 기준으로 각각 써져있는대로 0,1,2,3의값을 주었다.

가운데 기준으로 왼쪽 커졌을때 오른쪽 작아졌을때의결과를 확인해보면

 

flex-grow 값의 크기가 클수록 커졌을때는 크기가 크고,

 

작아졌을때는 flex-shrink   값이 클수록 크기가 작아진다

 

 

 

직접확인해보기 

 

 

 

 

 

 

반응형으로 만들기 위해서는 flex를 만들때 

flex-wrap:wrap;가 꼭 필요하다.. 안그러면 계속 작아지기만 한다.... 

또한 order를 이용해 순서변경을 해서 위치를 바꿀수 있다 .

 

[CSS] - [CSS]반응형 레이아웃 - 순서변경 Flex

 

flex-grow / flex-shrink 를 이용해 화면 크기가 줄어들거나 늘어났을때 그에 맞게 크기 조절하도록 할 수 있고,

 

flex-basis의 값으로 크기조절도 가능하다.