• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

space-between,space-around이 작동하지 않습니다!

20.11.16 17:39 작성 조회수 1.59k

0

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

         .container{

          display: flex;

flex-direction: column;

 justify-content: space-between;

          height: 80vh;

background: gray;

         }

.items {

padding: 2em;

border: 3px solid black;

background: white;

}

</style>

</head>

<body>

 <div class="container">

  <div class="items">AAA</div>

  <div class="items">B</div>

  <div class="items">CCCCCCC</div>

  <div class="items">DDD</div>

  <div class="items">E</div>

 </div>

</body>

</html>

이상하게 between이랑 around만 작동되질않아서 질문드립니다. 혹시 emmet패키지말고도 설치야 정상작동되는건가요?

답변 2

·

답변을 작성해보세요.

1

정말 희한한데.. justify-content: space-between 주변에, 뭔가 영향을 미치는 공백문자 같은게 들어간 것 같습니다.
저도 LH님 소스를 처음에 열었을 때는 동작을 안하다가, 개발자도구 CSS에서 flex-direction 부분의 체크를 해제했다가 다시 체크하니 동작을 하는데 뭔가 이상해서 주변에 공백들을 지우고 해봤더니 잘 동작하네요~

0

Lh LH님의 프로필

Lh LH

질문자

2020.11.19

제가 일본에서 유학중이라 일본자판을써서그런거같아요 다음에는 좀더 조심해서 해야할꺼같아요 ㅎㅎ 감사합니다