가로로 세울 때 높이를 높이가 낮은 쪽에 맞추세요.
이럴 때 쓸 수 있어요.
그림과 텍스트가 병렬된 레이아웃은 매우 흔하다.
왕복 운동 방식으로 이런 배치에 대응할 때
그림보다 문자량이 많으면 그다지 아름답지 않다
디자인을 바꿀 수 없어서 스크롤 텍스트를 설치했습니다.
상당히 간단한 방법이지만 실제로는 기억이 나지 않아 비망록이다.
보통 가로로 봐요.
높이를 합쳐서 가로로 배열하면 플렉스박스!(개인적인 생각)
일시적으로
display: flex;만 지정하면높이가 높은 쪽(텍스트)에 맞춰 형제 요소(초상화)도 길게 뻗어 있다.
See the Pen flexbox01 by YUU ( @YUUMU )
on CodePen .
높이를 조정하려는 내용 (텍스트) 에 하위 요소 만들기
flexbox의 특성상 높이가 높은 사람과 협조하는 것은 어쩔 수 없는 일이다.
높이를 조정할 내용 지정(텍스트)position: relative;,
그중에서 속옷 제작position: absolute;을 통해 높이를 지정,
지정height: 100%;을 통해 복구하려는 높이와 일치해야 합니다.
이번에 넘친 부분은 이해하기 쉽게 굴러갑니다.p>
See the Pen flexbox02 by YUU ( @YUUMU )
on CodePen .
スクロールする部分とスクロールしない部分を作る
높이가 일치하지만 넘치는 부분을 어떻게 처리하는지,
스크롤 부분과 스크롤 부분을 만들지 않으려면
물론 굴러가지 않는 요소와 굴러가는 요소는 따로 만들어진다.
그러나 position: absolute; 부모 요소가 있는 경우에는 overflow 유효하지 않습니다.
그럴 때
세로로 배열된 내용도 지정display: flex;을 통해 잘 수납하고,
overflow 자유롭게 처리 가능p>
See the Pen
flexbox03 by YUU ( @YUUMU )
on CodePen .
창 너비가 줄어든다고 가정하면 넘치는 내용에 지정됩니다 overflow: auto;기본적으로 원형을 유지하다.넘으면 스크롤할 수 있는 설치.
※ 배율 전환은 이해하기 쉽습니다p>
See the Pen
flex-responsive by YUU ( @YUUMU )
on CodePen .
Reference
이 문제에 관하여(가로로 세울 때 높이를 높이가 낮은 쪽에 맞추세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuumuJS/items/912b0c3fad299bbd18aa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
