[CSS] flex 속성

flex에는 다음과 같은 속성이 있다.
> 1. flex-grow: 늘어나는 값
2. flex-shrink:1 줄어드는 값-> 명확히 줄어드면 안될때만 flex-shrink:0 부여!!
3. flex-basis:size(auto가 기본.) */

box model로 여러 예제를 연습하였다.

1. 두 박스 사이 간격

A,B 박스가 있을때 사이 gap을 줘보자.일단 flex 속성 자체는 자식요소가 빠져나가지 않게 잡아두는 역할을 한다.

그래서 어떻게든 자신의 width안에서 자식요소들을 끼워놓으려고 한다.

두 박스에 display:flex를 부여하면 row가 기본값이기에 가로로 정렬된다.
이때 gap:30px를 준다고 하자.
A,B에 각각 같은 크기를 비율로 설정하려면 flex-basis:50%를 선언해줘야한다.
근데!

 

이렇게 자식요소들이 부모 요소범위내에서 벗어나는 것이다..
내가 부모요소에 width:500px를 줬을때 flex-basis:50%에 gap:30px를 하면
총 길이를 500*0.5 + 500*0.5 + 30 = 530px로 인식해버려서 부모의 width인 500px를 넘기 때문이다.
따라서 500px 안쪽에서 같은 크기의 박스를 gap :30px을 주려면 30의 절반값을 빼고 계산해야한다!

 

.box1 div { 
     flex-basis:calc(50% - 15px);
     flex-shrink:0; //난 절대 안 줄어들거야.
}

 

2. 엇갈리게 배열

 

 

가끔 웹사이트를 보면 이런 식의 배치를 본적이 있을 것이다.
[신세계푸드]https://www.shinsegaefood.com/company/story/vision.sf
여기 사이트를 보면 이렇게 배치되어있다!

 

<div class="container box3">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
        <div class="d">D</div>
</div>

위와 같이 마크업 되어 있다고 하자.


1. 일단 4개의 box를 flex로 나란히 배열
2. 각 box에 flex-basis:50% 부여
3. 4개 box의 부모요소에 flex-wrap:wrap 부여

 

그럼 이런 상태가 나온다.

flex-wrap을 했기에 튀어나온 부분은 아래로 자연스럽게 내려가는 것이다.

서로 간의 gap을 넣어줘야한다.
4개 box의 부모요소에 gap:40px 20px; 부여.

A,C 박스만 위로 좀 더 이동하게 하려면 margin-top을 - (음수) 값으로 주면 된다.
이때 A,C는 1,3번째인 홀수 요소이기에 nth-child 요소를 통해 좀 더 간편하게 css 적용을 할 수 있다.

 

.box3 div:nth-child(odd){ //odd = 홀수를 뜻함.
       margin-top:-50px; 
}

그래서 이를 적용한 다른 예제를 봐보자! 

 

사이트 footer에 보면 대부분 이렇게 회사 주소,문의,번호 등등이 써져 있는 걸 본적이 있을 것이다.
위에서 배운 flex 속성을 적용해보자면,
우선 크게 div로 묶은다음 column으로 flex되게 하고 자동으로 줄바꿈되게 wrap설정. 
주소 box는 부모 요소를 다 차지할거다! 라는 의미인 flex-grow:1; 부여.
문의,팩스,번호 box는 flex-basis:50%;  gap:10px;을 부여하면 된다!

.footer-content2{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.address{ //주소 부분
  flex-grow:1;
}

.other{ //문의,번호,팩스 부분
    display:flex;
    flex-basis:50%;
    gap:10px;
}