-
flexbox 알고나서 코딩하기가 너무 수월해 졌다. ^-^
세로로 flexbox 사용 하고 싶을때
부모의 영역을 더 주기 위해
height:100vh; 를 줬다 <---------------------------------------- 내 화면사이즈에 100%를 쓴다는 뜻( vh는 view height)
아쉽게도 세로 버전은 space 버전은 없다.
justify-content :flex-start; 
justify-content :space-between; 
space-between 
space-around 
center 중앙은 신기하게 왜그러는지는 모르겠지만 flex-center 하면 안됨 그냥 cecnter 이라고 해야 중앙으로 간다.
justify-content :flex-end; 가로 버전 할때는 justify-content: ~~~~; 라고 적어야함
align-items:flex-end; 이게 아까 말한 세로 버전 으로 해도 세로로 안변해서 부모의 영역을 더 주기 위해
height:100vh; 를 준것 이다.
저렇게 주게 되면 위에 있던 박스가 아래로 뚝 떨어진다.
align-items:center; 세로 버전은 align-items: ~~~~; 써야함
세로 버전 도 역시 center 만 써야 중앙으로 배치된다.
이제는 박스 들이 세로로 두면서 움직이는 모습을 배치 해보았다.
flex-direction: column; 
flex-direction: column; justify-content: flex-end; flex-direction: column; 이걸 쓰면은 justify-content 와 align-items 뒤바뀐다. 즉 가로 가 세로가 되고 세로가 가로가된다. 좀 해깔림....여기서 flex-direction을 지우게 되면 원래 대로 돌아가게된다.
flex-direction: column; justify-content: space-between; 
flex-direction: column; justify-content: space-around; flexbox 는 세로 길이나 가로 길이를 줄이거나 늘리면 같이 줄어들거나 늘어난다.
flexbox를 연습하고 싶다. 하면 아래 링크를 통해 연습!!!
https://flexboxfroggy.com/#ko 한국어 버전 영어버전 둘다 있다.!!!
정답은 flexbox froggy 24 level answer 치면 다나옴
flexbox 의 특징!
1. display: flex는 모든 요소를 가로로 둔다
2. display: flex는 부모한테 적용을 하고 자손을 건트롤 한다.
3. justify-content :가로로 요소들을 움직인다 (flex-start, center, flex-end, space-between, space-around 등의 값이 있음)
4. align-items: 세로로 요소들을 움직인다
5. flex-direction:column 가로로 정렬된 요소를 세로로 바꾸고 justify-content는 세로로 align-items는 가로방향으로 바뀐다
220126 수요일