Css #10 - display: flex (2)

align-items: 부모박스 안에서 세로로 자식박스를 정렬하는 속성

align-items를 사용하면 부모박스 안에서 자식 박스를 세로로 정렬할 수 있다. 이 때 '세로'는 부모박스의 top에 위치하느냐, middle에 위치하느냐, bottom부분에 위치하는가를 뜻한다.

• align-items: flex-start;
  : 기본값으로 부모박스의 top부분에 위치한다.
  
• align-items:flex-end;
  : 부모박스의 bottom부분에 위치한다.
  
• align-items: center;
  : 부모박스의 middle부분에 위치한다.
  
• align-items: baseline;
  : 자식박스들을 부모박스의 시작위치에 정렬한다. (=flex-start와 동일한 결과값)
  
• align-items: stretch;
  : 자식박스들을 부모박스의 높이에 맞게 늘림. 이 때, 자식박스는 height속성이 없어야 함.(height 선언 자체가 없어야한다!!)
  
  

flex-direction: 자식박스의 나열 방향 설정

자식박스를 부모박스 안에서 block속성처럼 세로로 정렬하거나, 기본값처럼 가로로 정렬할 때 사용함.

• flex-direction : row;
  : 기본값으로 flex를 적용한 기본 모습과 같이 가로로 자식박스들이 나열된다.
  
• flex-direction : row-reverse;
  : 자식박스들을 가로로 반전시킨다.
  
• flex-direction : column;
  : 자식박스들을 위에서 아래로 나열함.
  
• flex-direction : column-reverse;
  : 자식박스들을 세로로 반전시킨다.
  

flex-warp: 자식을 감싸는 속성

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

/* 부모박스 */
.con2{
    width: 700px;
    height: 500px;
    background-color: lightcyan;
    margin: 100px auto;
    /* 부모박스에 적용★★★ */
    display: flex;
    /* 하위 정렬속성 - 감싸기 속성 */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse; */
    }

/* 자식박스들 공통속성 */
div{
    width: 100px;
    /* stretch를 적용하려면 height속성이 없어야 함. height 선언 자체가 없어야 함 */
    height: 100px;
    font-size: 24px;
    text-align: center;
    line-height: 100px;
}

• flex-warp : nowrap;
  : 기본값으로 모든 자식 요소들을 한 줄에 걸쳐서 부모박스에 맞춤.
  
• flex-warp : wrap;
  : 요소들을 여러 줄에 걸쳐 정렬하고, 자식의 넓이 높이를 유지함.
  
• flex-warp : wrap-reverse;
  : 요소들을 여러 줄에 걸쳐 반대로 정렬하고, 자식의 넓이 높이를 유지함.
  

flex-flow: 나열속성 + 감싸기 속성

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

• flex-flow : row wrap;
  
• flex-flow : column wrap;
  
• flex-flow : column-reverse wrap-reverse;