[HTML/CSS] Flex 속성(align-items,align-content,align-self, justify-content)

Flex : flexbox의 레이아웃을 설정하는데 사용하는 속성 

 

1. flex-drirection  : flex-item의 방향을 설정하는 옵션 ( 명시하지 않으면 기본적으로 row 배치다.)

.container {
  flex-direction: row; /* 기본값, 아이템들이 수평으로 배치 */
  /* flex-direction: column; */ /* 아이템들이 수직으로 배치 */
}

 

2. justify-content : flex-item을 정렬시키는 옵션

.container {
  justify-content: flex-start; /* 기본값, 시작 부분으로 정렬 */
  /* justify-content: center :  가운데 정렬 */
  /* justify-content: flex-end : 끝 부분으로 정렬 */
  /* justify-content: space-between : 간격을 균등하게 배치 */
  /* justify-content: space-around : 간격을 아이템 양쪽으로 균등하게 배치 */
}

 

3. align-items :  flex-item은 세로 축을 기준으로 정렬시키는 옵션 

.container {
  align-items: stretch; /* 기본값, 컨테이너에 맞게 채우도록 늘림 */
  /* align-items: flex-start :  컨테이너의 세로 축 시작 부분으로 정렬 */
  /* align-items: center : 컨테이너의 세로 축 가운데로 정렬 */
  /* align-items: flex-end : 컨테이너의 세로 축 끝 부분으로 정렬 */
  /* align-items: baseline : 컨테이너의 시작위치에 정렬 */
}

 

4. align-self : flex-item에 대해 세로 축에서 어떻게 정렬할지 결정 

• 기본값은 auto로 align-items 속성의 값을 상속 받는다.
• stretch, flex-start, flex-end, center, baseline 등의 옵션을 사용가능하다. 

5. flex : flex-item의 크기를 확장/축소하는 속성으로 flex-grow, flex-shrink, flex-basis의 단축 속성 이다.

 

/* 기본 예시 flex-grow | flex-basis */
flex: 1;
flex: 1 30px;
/* 키 값 */
flex: auto;
flex: initial;
flex: none;

/* 전역값 */
flex: inherit;
flex: initial;
flex: unset;