align-itmes

지난 display:flex의  하위속성인 justify-content 에 이어서 다른 하위 속성들을 알아보자.

 

★ 시작 하기 전 하위속성들에 대해서만 쓰다 보니 잊은 게 있었는데 하위 속성 쓰기 전에 display: flex; 를 입력해 줘야 한다는 것이다. ★

 

align-items : 부모박스 안에서 세로 위치(기준)에 자식박스를 정렬하는 속성이다.
이때 '세로'는 부모박스의 top에 위치하느냐, middle에 위치하느냐, bottom부분에 위치하는가를 뜻한다.

 

contents와 item

 

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;(=flex-start와 동일한 결과값)

align-items: stretch; (단, 자식박스는 height속성이 없어야한다 <0px도 안됨>)

    

---

 

flex-direction : 자식박스의 나열 방향으로 자식박스를 부모박스 안에서 block속성처럼 세로로 정렬하거나, 기본값처럼 가로로 정렬할 때 사용한다.
(속성값에 -reverse가 붙으면 start와 end자리가 바뀌게 되고 또한 column으로 속성값이 적용되면 justify-content의 자리와 align-items의 자리도 바뀐다)

flex-direction: row;

flex-direction: row-reverse; (부모박스의 자리가 반전으로 바뀐것이다)

flex-direction: column; (가로 세로 정렬이 바뀐 것이다)

flex-direction: column-reverse;

 

---

 

flex-wrap : 자식을 감싸는 속성으로 flex를 적용하게 되면 자식 요소들이 부모 넓이보다 넓을 때 자동으로 찌그러든다.
이때 만약 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용한다.

flex-wrap: nowrap; (wrap상태가 아니므로 부모박스에 맞춰 자식박스가 찌그러진다)

flex-wrap: wrap;

flex-wrap: wrap-reverse;

 

---

flex-flow : 나열속성 + 감싸기 속성으로 flex-direction(나열속성) + flex-wrap(감싸기속성)을 한꺼번에 선언할 때 사용한다.
두 속성의 조합은 자주 사용되기 때문에 한 번에 선언하고 싶을 때 이 속성을 사용할 수 있다.
두 속성의 속성값을 공백으로 구분하여 한 번에 쓴다.      예시) flex-flow: column-reverse wrap-reverse;

flex-flow: column-reverse wrap-reverse;

 

 

하나씩 적용하는 속성들까지는 괜찮았는데 속성들이 많아지고 뒤집고 속성들을 섞어서 쓸 수 있고 하니 헷갈리기 시작한다. 

이런 속성값들을 익숙해 질 수 있게 하는 아주 좋은 게임이 있다고 하니 나중에 따로 포스팅해보겠다. 어떤 게임인지 기대된다😎