[CSS] Flex

ww8007·2021년 3월 14일
0

Css

목록 보기
3/4
post-thumbnail

오늘은 react를 하면서 flex에 대해 오류가 생겼던 부분에 대해서 기술하려고 한다.
요소 작성 부분에서 요소들을 flex로 설정을 하지 않을 시에 내용들이 가로로 생기지 않는 오류가 생겼다.


지금의 경우 이렇게 요소가 가로로 쌓이고 있지만 styled-component를 사용하여서

const MenuGroup = styled.div`
  display: flex;
  align-items: center;
  height: 100%;

  .logo {
    @media (max-width: 768px) {
    }
    display: flex;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 2px;
  }
`;
const MainMenu = styled.a`
  display: flex;

  li a {
    /* display: block; */
    padding: 10px;
    color: #3c4146;
  }
`;

이렇게 선언 할 시 요소가 세로로 쌓여버리게 된다

아직 이유는 모르겠지만 styled-component를 사용하여서 css를 손댈 일이 있다면
사용하는 태그안에 모두 선언해 주는 것이 옳게 동작을 하였다.

const MenuGroup = styled.div`
  display: flex;
  align-items: center;
  height: 100%;

  .logo {
    @media (max-width: 768px) {
    }
    display: flex;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 2px;
  }
  .main-menu {
    display: flex;
  }

  .main-menu li a {
    /* display: block; */
    padding: 10px;
    color: #3c4146;
  }
`;

profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글