javascript - 无需手动重新定位先前的元素即可将元素添加到页面

Question

假设您决定向 HTML 文件中添加一个新元素。您是否编辑所有其他元素的位置？对此有更好的方法吗？

例如，我有一个包含几个 div 元素和一个列表的布局。我花了一些时间让页面上的一切看起来都不错。然后我决定添加另一个 div 元素，突然间一切都乱套了。

Answer 1

你的问题似乎很开放，但我只是想给我两分钱。

输入:FLEXBOX

可用于响应式设计(响应式，意味着您的页面布局会根据正在查看的屏幕自动调整)的一个工具是 Flexbox 的 CSS 属性。

我编辑了这个简单的例子来展示它的实际效果。此示例仅对父元素使用几行 css 代码，但使子(框)元素根据屏幕尺寸自动调整大小和重新定位，而不需要任何其他样式:

display: flex;
flex-flow: row wrap;
justify-content: space-around;

在这里查看:simple flexbox sample

**一旦你在那个 fiddle 上，调整你的浏览器大小(或者可能放大和缩小)并看看这些盒子如何自动重新定位它们自己像变魔术一样!

有兴趣吗？这是让您入门的东西:Guide to Flexbox

希望这对您有所帮助!