遇到的问题如下：在使用flex布局 使其flex:1的元素添加 margin、padding属性时; 并且其里面的子元素超出一行省略，则在flex:1 的元素添加 min-width:0，生效，好使。 代码如下： <div class="flex-con"> ...

概述 这是我在写移动端页面遇到的问题及解决方法，记录下来供以后开发时参考，相信对其他人也有用。 问题 之前写移动端页面，有一个顶条是导航条，需要固定在页面顶部，并且里面的元素需要可以左右滚动。 但是当导航条设置fixed定位时，发现里面的子元素不能横向滚动。 最后通过加一个嵌套元素 ...

在开发中我们经常会遇到这种布局，要求文字垂直居中，且超出使用省略号说到垂直居中，兼容性最好的就是flex布局，但在flex布局下出现了text-overflow失效的情况 实例代码 <div class="wrapper"> <div class="flex item"> ...

在弹性布局中，有一种情况是左边设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后； 子元素 ...

1、overflow:hidden有时候会失效，在写overflow的盒子中加如下代码即可 ...

如题，原因未知，解决办法，在display:flex上面一层再新增一个div。在div里面滚动 ...

flex-shrink 加上：flex-shrink：0；定义了缩小比例,默认为1,即如果空间不足,项目将会缩小所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0;数值代表被缩小的程度!负值无效者缩小 ...

在 flex 布局中，当有一个元素宽度过长时，另一个元素宽度会被压缩， 如下图： 解决办法：在不想被压缩的元素上加上样式 flex-shrink: 0; 效果图： ...