【css中flex属性】固定宽度被挤压 flex为1的元素宽度超出父元素

html-css027

【css中flex属性】固定宽度被挤压 flex为1的元素宽度超出父元素,第1张

当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩，解决方法: 给固定宽度的元素添加flex-shrink:0。

flex-shrink

指定了 flex 元素的收缩规则。

设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。

解决方案：给右侧设置了flex:1的元素，同时设置width:0

CSS 使文字固定宽度，首先我们需要给包裹文字的这个元素一个width和height，如果是行级元素的话，需要使用display:block,改成块级元素，然后在设置宽高就行，请看代码：

<html>

<head>

<style>

#div1{

width:300px

height:30px

font-size:13px

}

</head>

<body>

<div id='div1'>

<p>我是测试文字</p>

</div>

</body>

</html>

由于span是行内元素，所以如果想要给它设置固定的宽度，需要先将其转换为块状元素，之后就可以为其设置固定的宽度了，如span {display:blockwidth: xxx px}。

请记住，任何的行内元素，都是不能对其进行宽高设置，它的高度只随着字体大小和行高而改变，而它的宽度只随着文本内容的宽度而改变，所以要设置行内元素的宽高值，将其转换为块状元素是最基本的方法。

至于什么是块状元素，什么是行内元素，它们之间有什么关系，可以直接百度，快速 了解一下。以上是个人的一些学习积累，又不对的地方，请见谅。