如果内容排不下自然会换行，两个解决方案供你选择使用响应式设计，当浏览器收缩时重新布局可阅读这篇文章 05responsive_web_designhtml 使用一个最小尺寸，浏览器缩小时，出现横向滚动条。

1如果图片数量保持不变的情况下，你可以写死div的宽度，这样即使浏览器缩小也不会影响到div的宽度，也就不会造成图片换行了 2如果你的布局是要求div宽度自动伸缩，那么你可以再这个div内部再嵌套一个table，table默认情况下是宽度最小化的，设不设定100%宽度你根据布局判断，把图片分别放入td内，td。

flexwrap 属性，设置伸缩容器宽度不够时，伸缩项是否需要换行 默认情况下如果伸缩容器的一行放不下所有的伸缩项， 那么系统会自动等比压缩所有的伸缩项 flexwrap属性取值 在伸缩容器中有一个叫做aligncontent的属性， 是专门用于设置换行之后的对齐方式的 注意点 只有伸缩项发生了换行这个属性才。

1如果图片数量保持不变的情况下，你可以写死div的宽度，这样即使浏览器缩小也不会影响到div的宽度，也就不会造成图片换行了2如果你的布局是要求div宽度自动伸缩，那么你可以再这个div内部再嵌套一个table，table默认情况下是宽度最小化的，设不设定100%宽度你根据布局判断，把图片分别放入td内，td是。

当启用Flex布局后，传统的floatclear和verticalalign属性将失效Flex容器有两个轴，主轴和交叉轴，通过justify属性调整主轴元素间的空隙，align属性则控制交叉轴上元素的垂直对齐容器有六个关键属性，包括flexdirection定义主轴方向flexwrap决定是否换行flexflow两者组合justify。

需求 假设高度默认100px ，请写出三栏布局，其中左栏右栏各为300px，中间自适应 将左右的div宽度设为300px，分别左右浮动，中间盒子不设宽度注意先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况 正常的渲染效果如下。

流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式父盒子开启displayflex后，默认为不换行，所以使用flexwrapwrap使其换行 使用justifycontent space。

若需子容器换行，使用 flexwrap 属性，可选择 nowrap不换行wrap换行或 wrapreverse逆序换行flexflow 结合了 flexdirection 和 flexwrap，简化了布局的设置多行排列时，使用 aligncontent 属性调整行与行之间的对齐方式，可选择 flexstartflexendcenterspacebetween。

4 **弹性伸缩比** `flex`决定子元素占用父元素剩余尺寸的比例，整数表示占据的份数此外，Flex布局还支持换行功能，通过`flexwrap`属性控制子元素是否换行通过实践，我们可以更好地理解和应用Flex布局例如，搭建一个具有自适应布局的产品区域，使用HTML标签构建结构，结合CSS样式来调整元素布局。

flexdirection 决定项目的排列方向，默认为row，可设置为rowreversecolumn和columnreverse flexwrap 控制项目换行，有nowrapwrap和wrapreverse三个值 justifycontent 定义项目在主轴上的对齐方式，如flexstartflexendcenter等 alignitems 项目在交叉轴上的对齐方式，如。

在伸缩容器属性中，主要通过flexwrap属性来设置伸缩容器是否换行，默认值为nowrape伸缩性定义伸缩项目可改变伸缩容器的宽度或高度填补可用的空间可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出2flexbox实现水平垂直居中对齐html， body height 100% width 100%。

Flex 布局的灵活性还体现在其子容器的属性中了解 flexgrowflexshrink 和 flexbasis 的作用，以及如何通过它们调整元素的伸缩性和基线，使布局更加动态和灵活flexgrow 控制元素在剩余空间中的伸缩比例，而 flexshrink 则控制元素在空间不足时的收缩比例flexbasis 则用于定义元素的初始宽度或。

CSS布局方式主要有以下几种1 流动模型 流动模型是CSS中的默认布局方式在流动模型中，块级元素会占据其父元素的整个宽度，从上到下排列，而行内元素则会从左到右排列如果空间不足，则会自动换行或产生溢出2 盒子模型 盒子模型是CSS布局的基础在盒子模型中，每个元素都被视为一个矩形盒子。

也就是会经过变形不超出父级默认值为1，按照该比例，切割子元素，如果我们想让他们不变形且不换行，可以把子元素的shrink值都设置为0 这就是视频和文字的差异了，因为用文字表达要准确，所以只能说的不是人话，实际上核心逻辑非常简单刚开始，我不明白这个属性有什么用处，后来发现三列布局时，通过html顺序。

很多时候，尤其是容器内有平行布局，例如两三个float的div时，宽度很容易出现问题在IE中，外层的宽度会被内层更宽的div挤破一定要用Photoshop或者Firework量取像素级的精度4关于高度的问题 如果是动态地添加内容，高度最好不要定义浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

这段代码很简单，后面使用overflowhidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了 imokercn爱摩客提供的代码片段 lt ！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lt html xmlns=quot。