인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

Lh LH님의 프로필 이미지
Lh LH

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

CSS Flex

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

해결된 질문

작성

·

1.9K

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

1분코딩님의 프로필 이미지
1분코딩
지식공유자

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

0

Lh LH님의 프로필 이미지
Lh LH
질문자

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

Lh LH님의 프로필 이미지
Lh LH

작성한 질문수

질문하기