<p><br />></p>
;
<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？
</正文>
</html></pre>
<p>我已经将box1显示为伸缩框。它不仅允许我水平横坐标里面的项目（子），还允许我沿着交叉轴垂直横坐标项目。然后我问自己，为什么我没有使用位置来居中的项目文字？后果会是表格吗？是因为我们不能在文本上应用位置吗？，如果项目是一个跨度框，我可以在其中应用位置吗？如果是，那么它不会产生问题，因为，我们必须使用绝对位置来支持响应boxn。这个问题又长又麻烦人，但对我来说很重要。</p>
当使用位置时，你必须定义物体每边需要多少像素才能定位它。这不是很灵活。想象一下，你必须测量/计算/尝试不同屏幕尺寸的每个对象需要多少像素，这是可能的，但需要花费大量时间和精力。所以flexbox更容易实现。
有了flexbox，你的内容也会更加一致。我的意思是，它会为你计算你需要多少像素在每一边的对象。这将减少脱靶计算的机会。因此，所有元素都将以相同的方式定位。