想知道是否可以只使用新的flexbox布局来获得与pinterest或jQuerymasonry相同类型的设计布局。据我所知:.flex-container{display:-webkit-flex;display:flex;-webkit-flex-flow:rowwrap;flex-flow:rowwrap;}.item{width:220px;height:250px;margin:10pxauto;padding:0;background:#ccc;}.item:nth-child(3n+2){background:#aaa;height:400px;}我只是使用PHP循环创建
一、背景FlexboxLayout(FlexibleBox)模块（截至2017年10月的W3C候选推荐标准）旨在提供一种更有效的方式来布置、对齐和分配容器中项目之间的空间，即使它们的大小或动态未知（所以称为“弹性”）。flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用的可用空间或收缩它们以防止溢出。最重要的是，与常规布局（基于垂直的块和基于水平的内联）相比，flexbox布局是方向不可知的。虽然这些适用于页面，但它们缺乏灵活性（没有双关语意）来支持大型或复杂的应用程序（尤其是在涉及
聚沙成塔·每天进步一点点⭐专栏简介⭐换行（FlexboxWrapping）⭐示例：实现换行⭐排序（FlexboxOrdering）⭐示例：实现排序⭐写在最后⭐专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无
我正在尝试使用FlexBox进行以下网格：[div][div][div][div]我似乎无法明白。我走了这么远：.flex-container{display:-webkit-flex;display:flex;width:400px;height:250px;background-color:lightgrey;}.flex-item{background-color:cornflowerblue;width:100px;height:100px;margin:10px;}.flex-center{width100%;}flexitem1flexitem1flexitem2flexitem3
这个问题在这里已经有了答案:Isitpossibleforflexitemstoaligntightlytotheitemsabovethem?(5个答案)Makeadivspantworowsinagrid(2个答案)HowtoCreateGrid/TileView?[duplicate](8个答案)关闭7年前。我想创建磁贴布局(类似于Metro风格的磁贴布局或Windows8的名称)。所以我有一些瓷砖/盒子，有些是二次方的，有些可以是sice和二次方的两倍，有些可以是宽度的两倍。到目前为止一切顺利，但我有一个响应问题，我认为flexbox会为我解决...但也许我错了。目前盒子的布局
这个问题在这里已经有了答案:Isitpossibleforflexitemstoaligntightlytotheitemsabovethem?(5个答案)Makeadivspantworowsinagrid(2个答案)HowtoCreateGrid/TileView?[duplicate](8个答案)关闭7年前。我想创建磁贴布局(类似于Metro风格的磁贴布局或Windows8的名称)。所以我有一些瓷砖/盒子，有些是二次方的，有些可以是sice和二次方的两倍，有些可以是宽度的两倍。到目前为止一切顺利，但我有一个响应问题，我认为flexbox会为我解决...但也许我错了。目前盒子的布局
我有一个由3个block级兄弟组成的网站:页眉、divsite-content和页脚。我将我的body标签设置为flexbox:display:flex;flex-direction:column;height:100%;中心site-contentdiv是flex-grow:1。这工作正常，并给了我这个布局(虚线框是模拟屏幕可见区域上显示的内容。页面按应有的方式滚动)。我的问题出现了，因为我想在某些页面的site-contentdiv中添加一个垂直/水平居中的框。因此，我为此框创建了一个div并将sitecontent设置为:.site-content{display:flex;fl
我有一个由3个block级兄弟组成的网站:页眉、divsite-content和页脚。我将我的body标签设置为flexbox:display:flex;flex-direction:column;height:100%;中心site-contentdiv是flex-grow:1。这工作正常，并给了我这个布局(虚线框是模拟屏幕可见区域上显示的内容。页面按应有的方式滚动)。我的问题出现了，因为我想在某些页面的site-contentdiv中添加一个垂直/水平居中的框。因此，我为此框创建了一个div并将sitecontent设置为:.site-content{display:flex;fl
我有一个水平导航，它有点长，需要重新排列以适应窄显示。我使用flexbox让它重排成多行。但是行数多了，导航项之间的划分就不那么明显了。我试着在顶部给它们一个边框，它有点管用——但当然，边框只在各个导航选项上可见，而不是在所有flexbox行之间创建一个很好的分界线。请查看片段全页，在帖子中查看时存在显示问题。或者使用thisfiddle.您可能需要缩小浏览器窗Eloquent能看到多行导航。header{height:3em;background-color:#fff;}#main{height:9em;background-color:#5987d1;}footer{height:
我有一个水平导航，它有点长，需要重新排列以适应窄显示。我使用flexbox让它重排成多行。但是行数多了，导航项之间的划分就不那么明显了。我试着在顶部给它们一个边框，它有点管用——但当然，边框只在各个导航选项上可见，而不是在所有flexbox行之间创建一个很好的分界线。请查看片段全页，在帖子中查看时存在显示问题。或者使用thisfiddle.您可能需要缩小浏览器窗Eloquent能看到多行导航。header{height:3em;background-color:#fff;}#main{height:9em;background-color:#5987d1;}footer{height:
