인프런 커뮤니티 질문&답변
작성한 질문수
질문있습니다!
작성
·
167
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.gnb {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.gnb a {
color: black;
font-size: 2.5rem;
text-decoration: none;
}
.gnb::before {
content: '01';
font-size: 1.5rem;
background-color: royalblue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="gnb">
<a href="#">CodingWorks Online Class</a>
</div>
</body>
</html>
flex를 body에 말고 부모인 .gnb에 줬더니 a:before가 크기를 가지는데
이것도 position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요 ?
답변 2
2
코딩웍스(Coding Works)
지식공유자
해당 예제는 플렉스랑 관계없는 예제인데 플렉스 질문을 하셨네요.
다음에는 예제와 관련된 질문 부탁드립니다.
질문 하신 내용에 대한 답은 드릴게요.
.gnb에 display: flex를 주면 자식요소인 a가 인라인블럭 성질을 가지면서 가로 배치됩니다.
자식요소가 블록요소인 경우 가로배치가 자동으로 됩니다.
역시 인라인 블록 성질이 되면서 크기값을 가질 수 있게 됩니다.
단, 인라인 블록으로 변경하면 오른쪽에 폰트 관련 마진이 5픽셀 정도 생기지만 display: flex를 주면 자식요소 그런 마진이 안생기면서 깔끔하게 가로배치됩니다.
position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요?
위에 말씀하신 내용으로 이해하시면 display: flex를 주면 자식요소에 대해 충분히 잘 이해하고 있다고 생각됩니다.
1
