2)CSS_Flexbox

Flexbox

Box와 Item 들을 행 또는 열로  자유자제로 배치함

 

저번에 Display와 Position 을 사용하여 레이아웃을 짜봤었다

그리고 오늘 할 이 Flexbox까지 이해하고 사용하게 되면

앞으로 웹을 제작함에 있어 정말 수월 하고 쉬워 질 것이다

 

레이아웃만 잘 짜는게 중요하고

그 다음이 디자인이니깐. . 

 

자 가보자고

 

과거의 레이아웃을 짜는건

Position, float, Table 등을 사용해 제작을 했었다

짜맞추는건 저걸로도 충분히 구현은 가능은 하나

너무 복잡하며 시간을 너무 잡아 먹었다

 

그리고 저 3가지의 방법으로 뭔가 만들기엔 제약사항이 많았다

 

---

Position은

https://whaledowny.tistory.com/23

1)CSS_ 레이아웃 정리, display, position

이때 했고..

 

Table은

https://whaledowny.tistory.com/21

2)HTML5_기본 용어 정리_자주 쓰는 태그(2)

여기서 했었는데..

 

float은 뭐여????

---

float

이미지와 택스트를 어떻게 배치 할 건지

정의하기 위해 나타내는것이다

 

과거엔 이걸로 여기로 저리고 막 배치를 해댔는데

사실 이건 핵이지..

 

용도가 아닌 부분으로 사용하는데

그게 가능하다면 이건 버그잖아

그래서 보완해 나온게

플렉스!

---

그럼 가보자~!

container에 쓰이는 속성이 있고

 

그리고 그 container안에 있는

item에 쓰이는 속성들이 있다

 

이 Flexbox는 box에 지정하는 속성들이 있고

그 안의 Itme에 지정해주는 속성들이 따로 있는거구나~

 

 

내가 중심이 되는 축을 수직으로두냐 수평으로 두냐에 따라

그 축이 서로 반대가 되는것

 

Item을 수평으로 나열하면 그 반대 축은? 수직축

Item이 수직으로 되있다면 그 반대 축은? 수평축

 

사실 이게 좀 어렵다....

---

실제로 그려보자고

 

먼저 div 태그를 좀 대량으로 만들어야 하는데..

이때  쓸수 있는 스킬. . .

 

div.container>div.itme.itme${$}*10

하면

간단하게 html 태그를 만들어 낼수 있다.

---

100%  와 100vh의 차이

		viewpoint height 100이란말임.. 뷰포인트 기준 높이 라는 말임. . 뭐 더설명이 필요하나..
		% 라는건 지금 저 container가 들어있는 저 부모의  높이의 n%를 채우겠다는 말이다

그럼 body 태그도 100%로 하면..? 그래도 그대로일것... 그 이유는 body 기준 부모 태그는 html이잖아

그럼 html 태그도 100%로 하면..? 그럼 그냥 100vh로 했을때와 같아 진다.. 

 

저기 무지개떡 색갈은여기서 하면됨..

알아서 맞춰..줌

https://m3.material.io/

Material Design

원하는 색상 갖다 복붙하면 됨

---

container 속상값

컨테이너 레벨부터 알아보자

먼저 Flexbox로 만들고 싶다면 이렇게. .

dsplay : flex

 

여기까지가 일단 기본 셋팅이고

이제 저 무지개떡 덩어리를 좀 갖고 놀아 보자

flex-direction: fow-reverse

오른쪽에서 왼쪽으로 진행하는걸 볼수있음

여기서 중심축이 으디여..

열이지! x축! 수평축임

 

flex-direction: column-reverse

메인축이 이제 수직이 되고

reverse를 쓰게되면 뒤집어져 진행된다

---

flex-flow

flex-wrap:nowrap
	한 줄에 아이템이 몇개가 됬든 그냥 무지성 계속 쭉 연달아 보여줌..

굳이 선언 안해줘도 기본값임

flex-wrap: wrap
	한줄 꽉 차면 자동적으로 다음 줄로 넘어간다

이것도 -reverse 쓸수있다

그럼 뒤집어져 웹핑됨

 

이 둘을 합칠수 있다

이거도 border-size border-style border-color 등을 합친 것처럼~

flex-flow: column nowrap;

[ 정리 ]
정렬할 아이템을 품고 있는 box태그의 display: flex로 만들어 놓고
이걸로 flex-direction: 전체적인 방향 (수평이 중심축인지 수직이 중심축인지) 결정한 다음
랩핑을 flex-wrap: 을 해주는데 한줄에 가득 차면 담줄로 넘길지 말지 정해 준다

---

justify-content:

아이템들을 어떻게 배치 할건지 결정해 주는것

justify-content :
flex-start		기본값, 왼쪽에서 오른쪽으로 (수직이 중심이라면 위에서 아래로)
flex-end		오른쪽에서 왼쪽으로 (direction이 column이면 아래서 위로)
		flex-direction이 column 일때. 단, reverse와는 달리 역전하진  않으며 순서 그대로 열만 끝으로 보내버림
center		중앙에 위치하게
space-around		양팔간격 나란히. 모든 아이템에게 동등한 간격을 줌 그래서 양끝의 아이템들 보면 좁다
space-evenly		다필요없고 모두가 동일한 간격
space-berween		양끝점 붙여버리고 사이 아이템 간격 맞춰버리기

중심축에서 아이템들을 어떻게 배치할건지 결정하는것!

---

 

align-items:

반대 축에서 아이템을 어떻게 배치 하는거

align-items:
center		수직적으로 중심에 두고 싶을
baseline		모든 텍스트를 균등하게 배열

---

align-content:

반대축의 아이템들을 지정하는것

space-berween		위 아래는 딱 붙어있으면서 중간에 사이를 둬서 정렬한걸 알수 있음
center		모든 아이템 중앙으로 몰

 

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox - Web 개발 학습하기 | MDN

 

지금까지. .container에 들어갈수 있는 속성 값들이였음..

 

저거 속성들 개발하다보면 자연스레 알게 되는데

굳이 암기할 필요까진 없고

참고 할 사이트를 말 하자면. .

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background

A Complete Guide to Flexbox | CSS-Tricks

큰 개념 정리 후

모르는건 저 들어가서 찾아보라

 

여기까지 

container

- 끝 -

---

items에 들어갈 속성들. .

셋팅 좀 바꿔보자

딱 요 상태. .

order:

순서를 바꿀..때 쓴다는데

이거 쓸일 없음..ㅋ

flex-grow:

flex-grow의 기본값은 0 이다

근데 1로 바꾸면 이렇게

창 크기에 맞게 늘었다 줄었다를 하게 된다

그럼 2 이상으로 설정하면..?

2배만큼 늘고 줄고 한다

flex-shrink:

grow 와 정 반대의 역활로

창의 크기가 줄어들는거

[정리]
flex-grow는 비율에 맞게 늘어나는것을 말하고
flex-shrink는 비율에 맞게 줄어드는걸 말한다

felx-basis:
		디폴트 기본값
		container의 with에 따라  정해진 n%에 맞게 창크기가 커지고 작아짐에 따라 변형이 된다

공간을 얼마나 차지 해야 하는지

좀 더 세부적으로한거

 

그리고 이걸 다 합친게~

flex
		grow shrink basis 순으로 쓰면 된다

---

align-self:

앞에서 container 에선 justify-content, align-items, align-content

등에서 아이템들을 골고루 배치 할 수 있었고

 

이번엔 이 align-self를 사용해 아이템별로 아이템들을 정렬 할 수 있다

컨테이너에 지정된 위치를 벗어나

하나만 특별이 중앙 위치로 두고 싶다면 

이래 쓰면 됨

---

정리

Flexbox는 Container에 꾸며주는 속성값들이 있고

Items에 꾸며주는 각각의 속성값이 따로 있다

 

이 Flexbox에는 축이 두개 있는데

하나는 중심축이고 반대축이 있다

그리고 이 축은 아이템이 수평이냐 수직이냐에 따라

바뀔수 있다

 

flexbox연습하기

https://flexboxfroggy.com/#ko

Flexbox Froggy