질문있습니다!

Question

< html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document < 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 ; } < body > < div class = "gnb" > < a href = "#" > CodingWorks Online Class flex를 body에 말고 부모인 .gnb에 줬더니 a:before가 크기를 가지는데 이것도 position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요 ?

코딩웍스(Coding Works) · Answer

해당 예제는 플렉스랑 관계없는 예제인데 플렉스 질문을 하셨네요. 다음에는 예제와 관련된 질문 부탁드립니다. 질문 하신 내용에 대한 답은 드릴게요. .gnb에 display: flex를 주면 자식요소인 a가 인라인블럭 성질을 가지면서 가로 배치됩니다. 자식요소가 블록요소인 경우 가로배치가 자동으로 됩니다. 역시 인라인 블록 성질이 되면서 크기값을 가질 수 있게 됩니다. 단, 인라인 블록으로 변경하면 오른쪽에 폰트 관련 마진이 5픽셀 정도 생기지만 display: flex를 주면 자식요소 그런 마진이 안생기면서 깔끔하게 가로배치됩니다. position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요? 위에 말씀하신 내용으로 이해하시면 display: flex를 주면 자식요소에 대해 충분히 잘 이해하고 있다고 생각됩니다.

rudals8920 · Answer

정말 감사합니다!!