[CSS] Flex

今日は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;
  }
`;