인프런 커뮤니티 질문&답변
작성한 질문수
display: flex 의 기능은 무엇인가요?
해결된 질문
작성
·
431
·
수정됨
0
프리캠프 css정렬강의에서
자식 box들을 정렬하기 위하여, 부모 box의 속성 및 값으로 display: flex을 먼저 쓰고,
flex-direction : row로 할건지, flex-direction : column으로 할건지 결정하고.
이어 justify content나 align itmes등을 사용하던데
그럼, display: flex의 기능은 무엇인가요?
display : flex 라는 코드 없이 위의 flex기능들을 구사하면 문제가 생기나요??
시험삼아 display : flex 라는 코드 없이 뒤이어
flex-direction : row;
justify items : center;
align items : center; 라고 적고 확인해보니.
부모 박스 안에 자식 박스가 마치
flex-direction : column ; 만 실행된 것과 같은 효과가 나타났습니다.
답변 1
1
제 생각엔 아래와 같으니 그냥 참고만 바랍니다.
<테스트 해본 코드>
html
<div class="fbox">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
css
.fbox {
/* display: flex; */
flex-direction: row;
justify-content: center;
align-items: center;
}
'display: flex의 기능은 무엇인가요?'
=> (답변) 해당 DOM 엘리먼트(<div class="fbox">)를 Flex container로 만들어줌. 즉, 해당 엘리먼트에 flex 관련 property를 적용할수 있게 해줌. 다시말해
flex-direction : row; 같은 것들이 정상 적용되게 해줌
'flex-direction : column ; 만 실행된 것과 같은 효과가 나타났습니다.' 에 대한 제 판단.
=> flex: row/column; 없이 flex-direction: row; 같은 flex 속성들을 사용한거라서, 브라우저에서 html/css 해석/실행시 해당 속성들을 무시했기 때문인것 같습니다.
그래서 'flex-direction: column만 실행된것 같은 효과'라기보단, Div 의 원래 속성이 Block 엘리먼트이기 때문에 위에서 아래로 줄바꿈되어 쌓인것으로 판단됩니다.
그렇게 판단한 이유는 아래와 같이 유효하지 않은 css 속성을 입력해도, 유효하지 않기 때문에 무시하고 에러 없이 그냥 div의 본연의 속성대로 브라우저에 그려지는것 같아서 입니다.
.fbox { hoho: center; }
감사합니다! 정성스럽게 답변해주셔서 내용이해에 많은 도움되었습니다.
좋은 하루 되세요 :)