4/15 - 웹2 (2강)

합본 - https://webstudy2.tistory.com/12

 

4/15 - 2강

 

flex정렬 2

[flex-direction] : 배치정렬 (123-321)

row : 한줄에 같이 배치 (inine-block 같은 것)
justify-content: 가로정렬
align-items: 세로정렬

column: 한줄에 하나씩 배치 (block 같은 것)
justify-content: 세로정렬
align-items: 가로정렬

column과 row는 한번에 쓸 수 없음

reverse를 사용하면 요소들(justify-content, align-items)의 start와 end의 순서도 뒤바뀐다.

align-self : flex-item 한개만을 움직일 수 있음.
flex-wrap: 줄바꿈

 

flex개념 2

[flex-grow]

https://codepen.io/kkkge/pen/abxjxbp?editors=1100

1. 비율을 맞춰주는 코드
2. 각각의 flex-item에 flex-grow: n;을 입력해주면 비율을 계산하여 적용시켜줌. ex) 1:2:1
3. container에 여백을 만들어 주면 여백을 제외하고 비율을 계산해줌.
반응형에서 유용하게 사용된다.

.flex-container>.flex-item-1{
  background-color:red; 
  flex-grow: 1;}
.flex-container>.flex-item-2{
  background-color:orange;
  flex-grow: 2;}
.flex-container>.flex-item-3{
  background-color:green;
  flex-grow: 1;}

grow 결과물

 

 

[flex-basis]

https://codepen.io/kkkge/pen/ZEZjZNJ?editors=1100

1. flex-grow와 함께 사용할 수 있다.
2. flex-grow는 flex-item의 내용물의 크기에 영향을 받는다.
3. basis는 내용물의 크기에 관계없이 flex-item 자체의 전체 크기의 비율을 맞추어준다.

.flex-item-1{
  background-color:red; 
  flex-grow: 1; flex-basis: 0;}
.flex-item-2{
  background-color:orange;
  flex-grow: 1; flex-basis: 0;}
.flex-item-3{
  background-color:green;
  flex-grow: 1; flex-basis: 0;}

basis 없을 때

 

basis 있을 때