前言

最难的果然还是css，工作中经常使用display:flex; 让多个竖直排列的元素变成横向排列，直到今天才发现display:flex; 会导致子标签的宽度失效。

正文

问题

<div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div>
</div>.outer {width: 300px;border: 1px solid black;overflow-x: auto;display: flex;.inner {width: 200px;height: 20px;background: pink;margin-right: 10px;}
}

按理说，父元素应该会出现横向滚动条，但实际结果如下：

原因

百度查了一下，原因如下：

父元素设置了display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能，所以子元素宽度才会失效。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
flex的默认值就是 0 1 auto

解决

方法1

flex: 0 0 auto;
width: 200px;

方法2

flex: 0 0 200px;

方法3

flex-shrink: 0;
width: 200px;

方法4

min-width:200px;

效果

推荐使用方法3

css display:flex 弹性布局子标签设置宽度无效的问题相关推荐

当display:flex弹性布局与position:absolute/fixed定位一起用，会出现的问题与解决方法
首先放出使用场景的截图: 使用场景导航栏固定定位导航栏内,平均分为四块,为了适配各种移动设备,使用了flex布局. 与此同时,产品经理要求:页面上滚越过封面图时,导航栏变为固定定位,浮在页面顶部. ...
HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...
CSS——flex弹性布局
创建表单,加入常用的表单控件 <form><input type="email" name='email'><button type="su ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
移动端基础（2）—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...

css display:flex 弹性布局子标签设置宽度无效的问题

前言

正文

问题

原因

解决

css display:flex 弹性布局子标签设置宽度无效的问题相关推荐

最新文章

热门文章

css display:flex 弹性布局 子标签设置宽度无效的问题

前言

正文

问题

原因

解决

css display:flex 弹性布局 子标签设置宽度无效的问题相关推荐

最新文章

热门文章

css display:flex 弹性布局子标签设置宽度无效的问题

css display:flex 弹性布局子标签设置宽度无效的问题相关推荐