display: flex 의 기능은 무엇인가요?
프리캠프 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 ; 만 실행된 것과 같은 효과가 나타났습니다.
Answer 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; }
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
32
1
댓글 기능 구현 중 질문드립니다.
0
64
1
쿠폰코드 발급
0
127
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
85
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
75
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
68
2
학습자료가 안열립니다.
0
47
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
58
0
기존강의 구매자, 업데이트 끝인가요?
0
107
3
업데이트 버전 수강
0
87
2
완벽한 프론트엔드
0
135
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
80
1
graphql 접속이 안됩니다.
0
99
2
const, let 사용 질문 드립니다.
0
69
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
121
2
회원가입 과제 피드백 부탁드립니다.
0
78
2
styled.span / styled.input "CSS 자동완성"
0
46
1
쿠폰 발급 관련
0
165
2
서버 502 error
0
246
2
쿠폰 다시 부탁드려도 될가여?
0
139
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
181
2
2분 44초 질문
0
127
3