[CSS] FLEXBOX외 등등 정리

0.

- Container와 Item 별로 적용할수 있는 속성값이 있다. 

- main axis와 cross axis가 있다. 

 

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-flow: column wrap;

  justify-content: center;
  align-items: center;
}

.item {
  flex: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

중심축에 정렬 -> justifycontent

반대축에 정렬 -> align-items

 

1.

div width를 100%로 하면 부모노드의 넓이와 같아진다.! 

 

2. 미디어 쿼리 

- 반응형 웹을 사용할 때 사용 

@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
  }

  .navbar__menu {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar__menu li {
    width: 100%;
    text-align: center;
  }

  .navbar__icons {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}

3. 보통 body전체에 margin을 0으로 설정한다. 

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}