언제 Flex Box 대신 위치를 사용하여 요소의 위치를 지정해야 합니까?
P粉914731066
2023-07-23 17:48:48
<p><br /></p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<제목>문서
<스타일>
#dn{
너비: 400px;
높이: 400px;
패딩: 20px;
테두리: 2px 솔리드 #cd1313;
}
.box1 {
너비: 100%;
높이: 100%;
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
텍스트 정렬: 중앙;
글꼴 두께: 굵게;
색상: 흰색;
글꼴 크기: 24px;
배경색: #000000;
}
</스타일>
</머리>
<본문>
<div id="dn" class="boxn">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto ducimus repudiandae Inventore iste porro distinctio necessitatibus incidunt accusamus facilis obcaecati! 안녕 나멘
<div id="d1" class="box1">
어린이
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque deleniti quibusdam quod praesentium, soluta harum alias aperiam hic voluptatum natus?
</div>
</body>
</html></pre>
<p>我已经将box1显示为伸缩框.后我问自己，为什么我没有使用位置来居中的문자? 那么后果会是什么呢?是因为我们不能吗?，如果项目是一个跨島框，我可以?如果是，那么它不会产生问题，因为我们必须使用绝对位置来使它响应boxn。这个问题又长又烦人，但对我来说很重要。</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
위치를 사용할 때 위치를 지정하는 데 필요한 개체의 각 측면에 몇 픽셀이 있는지 정의해야 합니다. 이것은 그다지 유연하지 않습니다. 다양한 화면 크기에 대해 각 개체에 필요한 픽셀 수를 측정/계산/시도해야 한다고 상상해 보세요. 가능하지만 많은 시간과 노력이 필요합니다. 따라서 Flexbox를 구현하기가 더 쉽습니다.
Flexbox를 사용하면 콘텐츠의 일관성이 더욱 높아집니다. 즉, 개체의 각 측면에 필요한 픽셀 수를 계산합니다. 이렇게 하면 목표를 벗어난 계산 가능성이 줄어듭니다. 따라서 모든 요소는 동일한 방식으로 배치됩니다.