HTML/CSS - Inline_block & Flex_box

1. inline-block

- style에 있는 display속성을 이용하면 inline을 block처럼 block을 inline처럼 이용할 수 있다.

-  그러나 block타입을 inline속성으로 바꿔주면 화면에 잘 보이지 않는다. (아래 사진참고) 

div 3개를 그대로 출력

-위의 사진은 div 3개를 그대로 출력한 것이다. 이를 inline 속성으로 바꿔주면 아래의 사진처럼 제대로 출력되지 않는 것을 볼 수 있다. 

- 이런 문제를 해결하기 위해 display속성에 inline-block이라는 속성을 이용하여 해결한다. 이를 이용하면 block을 inline 형식으로 출력할 수 있게 된다. (아래 사진 참고)

div를 inline-block 형식으로 출력

 

- 하지만, inline-block 속성에는 문제가 많다. 위의 사진에서 볼 수 있듯이, 개발자가 만들지 않은 공백이 div사이에 존재한다는 것과 반응형 디자인을 지원하지 않기때문에 사용자의 화면 크기에 따라서 다르게 출력한다는 것이다. 

 

- 이러한 문제점을 해결하기 위해 Flex-box를 사용한다. 

---

2. Flex-box

- Flexbox는 이름처럼 유연하게 화면에 따라 box를 원하는 위치에 설정할 수 있도록 한다.

- 이를 사용하기 위한 몇가지 규칙이 있다.

 

1) Flexbox 속성은 부모 엘리먼트에만 명시한다. 자식 엘리먼트에는 명시하지 않는다. 

ex) div를 담고있는 body태그에 명시한다. → 부모 엘리먼트를 Flex Container로 만드는 작업 
- 이를 위해 부모태그의 display속성을 flex로 명시해야 한다. 

body의 display속성을 flex로 바꾸면 오른쪽 사진처럼 div가 수평으로 정렬된다.

 

- 이제 Flex박스에서만 사용할 수 있는 다양한 속성들을 이용하여 엘리먼트를 조정할 수 있다. (아래 사진참고)

ex) justify-content 속성 - center(정가운데로 위치), flex-start(기본 위치), flex-end(화면 우측 끝에 위치), space-evenly(화면에 맞춰 여러 요소들의 간격을 동일하게 조정) 

justify-content의 center를 적용

 

 

2) Flex-Box는 수평으로만 움직이지 않는다. - 주축(main axis), 교차축(cross axis)

https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183

 

- 사용하려는 속성에 따라 다른 축(axis)가 적용된다. 위에서 보았던 justify-content는 주축(main axis)을 기준으로 적용되는 속성이다. 그렇다면 교차축(cross axis)으로 움직이는 속성은 무엇일까? 그 속성은 align-items이다. 

 

- align-items 속성을 이용하기 위해서는 body의 높이를 조정해야 한다. (아래 사진참고)

 

 

- 현재 body의 높이가 div의 높이와 동일하기 때문에 교차축으로 움직일 수 없다.(수직으로 움직일 공간이 없음) 그러므로 body의 높이를 조정해야 한다. 

 

- 이제 align-item 속성을 사용할 준비가 되었다. 다양한 속성값을 적용해보자. 

---

3. Flex-direction

- FlexBox는 기본적으로 x축(수평)을 주축으로 y축(수직)을 교차축로 사용한다. 하지만 상황에따라 y축을 주축으로 사용해야 할 때가 있다. 이를 가능하게 하는 것이 Flex-direction이다.

- Flex-direction 속성에는 2가지 값이 있다. row는 default값으로 x축을 주축으로 사용하는 것이고 column은 반대로 y축을 주축으로 사용하는 것을 의미한다.

flex-direction의 속성값을 column으로 설정한 모습

---

4. Flex-box 응용 

- 자식 엘리먼트만 있다면 얼마든지 부모엘리먼트를 Flex 컨테이너로 만들어 위에서 배운 속성들을 사용할 수 있다. 

예를 들어, div에 String을 자식으로 만들어 주자. (아래 사진참고)

- 이렇게 하면 div는 부모 엘리먼트가 되고 그 내부에 존재하는 문자열이 자식 엘리먼트가 된다. 

 

[div태그에 flex 속성 적용 전] 

 

 

[div태그에 flex 속성 적용 후] 

 

---

5. Flex-wrap

- Flex-wrap 속성은 화면크기에 따라 엘리먼트의 너비를 줄이지 않고 고정값으로 갖게 해주는 속성이다. 이를 사용하기 위해서는 flex-wrap의 속성값을 wrap으로 설정하면 된다. (아래 사진참고)

 

예시) 아래 사진과 같이 설정한 div가 존재한다. width를 300px로 설정하였다. 

 

 

- wrap이 설정되어있지 않거나 기본값인 nowrap상태에서는 엘리먼트가 갖고있는 width가 고정값이 아닌, 브라우저의 폭에 맞게 출력된다. (아래 사진참고)

 

 

- 이와 다르게, wrap으로 설정하면 width: 300px가 고정값으로 설정되어 너비가 줄어들지 않고 출력된다.