;
<html lang="zh-cn">
<頭>
<元字元集=“UTF-8”>
<元名稱=“視口”內容=“寬度=設備寬度，初始比例= 1.0”>
<標題>文檔
<風格>
#dn {
寬度：400px；
高度：400像素；
內邊距：20px；
邊框：2px實線#cd1313；
}
.box1 {
寬度：100%；
高度：100%；
顯示：柔性；
調整內容：居中；
對齊項目：居中；
文字對齊：居中；
字體粗細：粗體；
白顏色;
字體大小：24px；
背景顏色：#000000；
}
</風格>
</頭>
<正文>
<div id="dn" class="boxn">
Lorem，ipsum dolor sat amet consectetur adipisicing elit。 Architecto ducimus repuudiandae inventorye iste porro Outstanding necessitatibus incidunt Accusamus facilis obcaecati！嘿，名字
孩子
Lorem ipsum dolor sat amet consectetur adipisicing elit。 Eaque deleniti quibusdam quod praesentium，soluta harum 別名 aperiam hic voluptatum natus？
P粉3114649352023-07-24 11:11:40
當使用位置時，你必須定義物體每邊需要多少像素才能定位它。這不是很靈活。想像一下，你必須測量/計算/嘗試不同螢幕尺寸的每個物件需要多少像素，這是可能的，但需要花費大量時間和精力。所以flexbox更容易實現。
有了flexbox，你的內容也會更一致。我的意思是，它會為你計算你需要多少像素在每一邊的物件。這將減少脫靶計算的機會。因此，所有元素都將以相同的方式定位。