衡水龙腾网站建设,做网站字体规范,怎样做公司网站,提高网站的访问速度文章目录 问题示例代码解决问题改进后的效果 问题
最近在开发项目的过程中#xff0c;发现了一个有趣的事情#xff0c;与flex盒子有关#xff0c;不知道算不算是一个bug#xff0c;不过对于开发者来说#xff0c;确实有些不方便#xff0c;感兴趣的同学不妨也去试试。 … 文章目录 问题示例代码解决问题改进后的效果 问题
最近在开发项目的过程中发现了一个有趣的事情与flex盒子有关不知道算不算是一个bug不过对于开发者来说确实有些不方便感兴趣的同学不妨也去试试。
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background-color: #fff;}/style
/headbodydiv classflexdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/div/div
/body
/htmlstyle.flex {display: flex;width: 150px;overflow: auto;justify-content: center;background: yellowgreen;margin: 0 auto;}.flex-content-item {padding: 20px;}
/style示例效果 滚动条已经拉到了最左边但是左边的内容并没有完整显示。 目前flex盒子会出现这个问题的原因无从知晓只有当以下条件同时满足时才会这样display: flex; justify-content: center; 有与flex-direction方向一致的滚动条出现
解决问题
为了解决显示不完全的问题我只能放弃使用flex盒子通过display:inline-block来实现横向排列并且不允许盒子换行。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background-color: #fff;}/style
/headbodydiv classflexdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/divdiv classflex-content-itemsimpledengxi/div/div
/body/htmlstyle.flex {width: 150px;/* 还是优先中间排布 */text-align: center;background: yellowgreen;margin: 0 auto;/* 仍然需要滚动条 */overflow: auto;/* 不允许字体换行这样就必定会出现滚动条 */word-break: keep-all;white-space: nowrap;}.flex-content-item {padding: 20px;/* 里面的盒子必须是inline-block或者inline 否则 text-align: center 不生效 */display: inline-block;}
/style改进后的效果
