우측정렬: text-align: right | display:flex, justify-content:flex-end |

1) text-align: left/center/right;

block 요소안의 inline 요소를 정렬할 때 사용

다른 요소들이 없을때 가능-어떤것 오른쪽으로 어떤건 왼쪽으로 이렇게 하려면 flex를 이용해야 함

 

2) display: flex, justify-content: flex-start/center/flex-end;

 

1) 2) 샘플 참고: https://hianna.tistory.com/837

 

그런데 위의 1) 2)는 바로 위 부모 밑에 모든 애들이 다 한 방향으로 정렬되게 되어 있음

기본은 좌측정렬이고 마지막만 우측정렬하려면

3) display: flex, justify-content: flex-start/center/flex-end; 설정해두고 우측 정렬할 것만 margin-left: auto

참고: https://smthousand.tistory.com/28 

 

 

1) 2) 3) 모두 바로 위 부모 밑 자식에게 적용가능함

할아버지 할머니에 비교해서 왼쪽 정렬되게 하려면

4) position: absolute 이용

할아버지 할머지는 position: relative로 설정, 우측 정렬하고 싶은 손주는 position: absolute, right:0

 

 

5) display: flex, justify-content: space-between 해주면 2개자식이 있을 때 최대한 멀리 떨어뜨려줌, 자식이 3개일때는?

6) display: flex, 첫번째 자식을 display:flex, flex-grow:1 해주면 됨 왜그런지는?