CSS - 블록속성 정렬

래핑용박스 중앙정렬

래핑용박스{

박스1

박스2

박스3

}

이 있다.

여기서 래핑용박스와 그 안의 박스1,2,3을 중앙으로 정렬할때는 래핑용박스의 부모태그인 Body태그에

    display: flex; justify-content: center; align-items: center;  height: 100vh;

이 네 가지 속성을 부여해주면 된다. 그러면 상하,좌우 정렬이 된다.

 

---

 

래핑용박스{

박스1박스2박스3

}

이런식으로 정렬하고자 하면 박스1,2,3을 왼쪽으로 붙이고싶은 상황인데.

박스1,2,3의 부모인 .래핑용박스{}와 각각의 박스들을 모두합친 .래핑용박스 .박스{}에 따로 설정해줘야한다.

.래핑용박스{}에 overflow:hidden; 

.래핑용박스.박스{} 에 float:left; ;

이런식으로 해주면된다. 만약 오른쪽으로하고싶다면  float:left; ;대신 float:right; 를쓰면된다.

그럼                     [                                                                       박스3박스2박스1] 이런식으로 정렬이된다.

---

래핑용박스, 박스1,2,3 모두다 중앙정렬

래핑용박스가 중앙정렬된 상태에서, 박스1,2,3또한 그 내부에서 중앙정렬하려면

첫번 째 예시와 같다. 박스1,2,3을 중앙정렬하고싶다면, 박스1,2,3의 부모태그인 래핑용박스태그에 

display: flex; justify-content: center; align-items: center;  height: 100vh;

속성을 부여해준다.

여기서 박스1,2,3,을 균등하게 하고 싶다하면 justify-content: space-around;

justify-content :  space-around;

---

박스1,2,3을 래핑박스 내부에서 위 아래로 정렬하려면

박스1,2,3의 부모태그인 .래핑용박스{}에

display: flex; justify-content: space-around; align-items: center; flex-direction: column;

여기서 주의깊게봐야할 것은 flex-direction: column; 이다.

flex-direction : column ;