CSS flex-box 의 부모 속성 justify-content & align-content

📌  Flex-Box?

 

 

말 그대로 어어엄청 힙한 아이 

부모요소에 꼭 flex-box를 넣어줘야 자식요소들이 flex속성을 활용할 수 있다 

 

<!--부모요소인 div.container를 Flex Container라고 부르고-->
<!--부모요소에 적용해야하는 속성과-->
<div class="container">
  <!--자식요소인 div.item들을 Flex Item이라고 부른다-->
  <!--자식요소에 적용해야하는 속성이 다르다 !!-->
  <div class="item">helloflex</div>
  <div class="item">abc</div>
  <div class="item">helloflex</div>
</div>

 

 

📌  Flex-Box : Flex Container 나는 부모 속성

 

 

🏁  display: flex

 

.container {
  display: flex;
}

 

item들이 가진 내용물의 width만큼 너비를 차지한 채, inline요소들처럼 다닥다닥붙는다.

여기서 container에 height을 설정해주면 item들도 부모 높이 따라서 좌라락 예쁘게 놓여진다.

 

 

 

🏁  display: inline-flex

 

.container {
  display: inline-flex;
}

 

flex가 div처럼 화면 한 줄을 잡고 촤라락이라면

inline-flex는 item들한테 flex값 먹이고 그 줄에 공간 남으면 다른 요소들을 그 줄로 올라오게 하는 ^^
inline-block같은 아이다.

 

 

 

🏁  flex-direction: row / row-reverse / column / column-reverse

 

item들이 배치되는 축의 방향을 결정하는 속성.

 

.container {
  flex-direction: row;
}

 

좌  -->  우  : 가로 배치

display: flex했을 때 기본값

 

.container {
  flex-direction: row-reverse;
}

 

우  -->  좌  : 가로 배치

(※ item들 순서도 바뀜 주의)

 

.container {
  flex-direction: column;
}

 

상  -->  하  : 세로 배치

 

.container {
  flex-direction: column-reverse;
}

 

하  -->  상  : 세로 배치

(※ item들 순서도 바뀜 주의)

 

 

 

🏁  flex-wrap: nowrap / wrap / wrap-reverse

 

container가 item들을 화면상에서 한 줄에 보여주지 못할 때 (ex. 사용자가 화면을 줄인다거나 뭐)

item 줄바꿈을 어떻게 할건지 결정하는 속성.

 

.container {
  flex-wrap: nowrap;
}

 

item이 화면상에서 넘쳐버리면 쿨하게 안보여줌 패쓰 ~

flex-wrap의 기본값.

 

.container {
  flex-wrap: wrap;
}

 

float / inline-block으로 배치한 요소들과 비슷하게 동작한다.

넘친 item을 친절하게 밑으로 내려서 보여준다.

 

.container {
  flex-wrap: wrap-reverse;
}

 

넘친 item을 친절하게 위로 올려서 보여준다. ㅎ

 

 

 

🏁  flex-flow: flex-direction flex-wrap

 

flex-direction 속성과 flex-wrap 속성을 이렇게 한꺼번에 flex-flow 로 묶어줄 수도 있다.

 

.container {
  flex-flow: row(direction) wrap(wrap);
}

 

 

 

🏁  justify-content:               flex-start / flex-end / center / space-between / -around / -evenly

🏁  align-content:  stretch / flex-start / flex-end / center / space-between / -around / -evenly

 

justify-content  -->  주 축 (main-axis) 의 정렬 방법.

align-content  -->  교차축 (cross-axis) 의 정렬 방법.

-->  둘 다 flex line을 정렬한다.

 

.container {
  display: flex;
  justify-content: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

 

아이템 줄 그대로 ~ 좌측 정렬

 

.container {
  display: flex;
  justify-content: flex-end;
}

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
}

 

아이템 줄 그대로 ~ 우측 정렬

(※ item순서 안바뀜!)

 

.container {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-content: center;
}

 

아이템 줄 그대로 ~ 가운데 정렬

 

 

❗ 주의점 ❗

 

웹 브라우저는 width는 보통 (자연)고정되어있다.

그러나 height는 height값을 주지 않으면, content 자체의 높이를 따른다.

 

01

( content에 height값을 주지 않았다고 가정 )

flex-direction이 row일때 justify-content는 다양한 변화를 줄 수 있지만, align-content는 적용되지 않는다.

flex-direction이 column일때도 height값의 부재로, justify-content와 align-content 모두 적용되지 않는다.

내가 상상하는대로 절대 움직이지 않았다.

 

02

( container에 flex-wrap값을 주지 않았다고 가정 )

flex-direction이 row일때 justify-content는 잘 적용되지만, align-content는 적용되지 않는다.

wrap값이 없으면 item의 위치가 가로축에 고정되어 세로축에 변화를 줄 수 있는 여지가 사라진다.  -->  flex-line이 하나이기에 !!

즉 wrap값을 적용하고 item이 적어도 2줄 이상은 되어야 align-content를 적용했을 때 효과가 나타난다.

flex-direction이 column일때도 마찬가지다.

column은 특히 wrap값을 주지 않으면 미동도 안한다. justify-content, align-content 모두 적용되지 않음 ㅜ!

애초에 수직으로 밀려있는 item들이기에 height값과 wrap값을 꼭 줘야 원하는대로 작동한다.

 

/* row & column */
/* 좌우 균일 정렬 */

.container {
  height: 500px;
  display: flex;
  justify-content: space-between; 
}

.container {
  height: 500px;
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
}


/* row & column */
/* 상하 균일 정렬 */

.container {
  height: 500px;
  flex-flow: row wrap;
  align-content: space-between; 
}

.container {
  height: 500px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

 

flex-direction: row / column       

-->  item들 사이(between)에 균등한 간격을 만들어 준다

-->  화면의 width가 중심으로 하기때문에 양 사이드의 item이 화면 끝에 붙어버린다 ㅎㅎ

 

/* row & column */
/* 좌우 균일 정렬 */

.container {
  height: 500px;
  display: flex;
  justify-content: space-around; 
}

.container {
  height: 500px;
  display: flex;
  flex-flow: column wrap;
  align-content: space-around;
}


/* row & column */
/* 상하 균일 정렬 */

.container {
  height: 500px;
  flex-flow: row wrap;
  align-content: space-around; 
}

.container {
  height: 500px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
}

 

flex-direction: row / column       

-->  item들 둘레(around)에 균등한 간격을 만들어 준다

-->  item둘레에 똑같은 간격을 줘서 띄우기때문에 양 사이드의 item은 1/2만큼 덜 띄워진다 ㅎㅎ

 

/* row & column */
/* 좌우 균일 정렬 */

.container {
  height: 500px;
  display: flex;
  justify-content: space-evenly; 
}

.container {
  height: 500px;
  display: flex;
  flex-flow: column wrap;
  align-content: space-evenly;
}


/* row & column */
/* 상하 균일 정렬 */

.container {
  height: 500px;
  flex-flow: row wrap;
  align-content: space-evenly; 
}

.container {
  height: 500px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-evenly;
}

 

flex-direction: row / column       

-->  공백과 item을 도미노처럼 일렬로 세운 모습을 만들어준다

--> item이 화면 끝에 붙지도 않고, 애매하게 1/2만 띄워져있지도 않다

--> 개인적으로 되게 좋아하는데.. IE와 Edge에서는 지원이 안된다