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

Inflearn Community Q&A

하얀's profile image
하얀

asked

Learn CSS Flex and Grid Properly

Flex Essentials #5 - Using Flex Properties

width 질문

Written on

·

231

0

플렉스 아이템에 width 값을 100px을 주면 1분코딩에서 사이트에서는 두번째 플렉스 아이템에서 BBBBB가 자동으로 줄바꿈이 되는데

<!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>CSS Flex</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">AAA</div>
        <div class="flex-item">BBBBBBBBBBBBBBBBBBBBB</div>
        <div class="flex-item">CCCC</div>
    </div>
</body>
</html>
@import url('reset.css');

.flex-container {
	display: flex;
	border: 5px solid tomato;
}

.flex-item {
	border: 5px solid black;
	width: 100px;
}

 

제가 쓴 소스코드에서는

BBBBBBBB 라고 써져 있는 두번째 플렉스 아이템의 내용이 왜 줄 바꿈이 안되고 글씨가 옆으로만 가는 건지 잘 모르겠습니다. ㅠㅠ

flexHTML/CSS

Answer 1

0

studiomeal님의 프로필 이미지
studiomeal
Instructor

아, 그건 제 웹사이트에 기본적으로 word-wrap: break-word;를 설정해두어서 그렇습니다.
플렉스 아이템에 word-wrap: break-word; 를 적용해보세요!

하얀's profile image
하얀

asked

Ask a question