flex布局怎么设置其中元素的宽度

Posted 2023-04-23

div实际得宽度＝div宽度＋padding的宽度。想保持一定距离有很多方法：你可以把让现在div的宽度改成减去padding后的宽度，还可以里面欠个div直接设padding。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。Webkit内核的浏览器，必须加上-webkit-前缀。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 参考技术A 父元素高度设置为空或者auto即可，如height:auto或者不要height;，举例如下:
1.高度采用auto;
这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐；
这是父级内容，宽度为800px,高度自适应本回答被提问者采纳 参考技术B <div class='father'>
<div class='child-one'>测试1</div>
<div class='child-two'>测试2</div>
<div class='child-three'>测试3</div>
</div>.father
display: flex;

/*比如要设置‘测试1’所在‘div’宽度固定为‘300px’*/
.child-two
flex-grow: 0;
flex-shrink: 0;
width: 300px

/*可以理解为：此处设置flex-grow,flex-shrink是告诉flex，既不要给我自动放大，也不要给我自动缩小，我就想设置自己的宽度*/ 参考技术C 如果是flex-direction:
row;则对相应的flex-item设置样式为
flex:0
1
200px就是设置宽度为200px;flex-direction方向的则是设置高度为200px,也可以用%单位； 参考技术D 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
但是子元素的宽高，还可以设置啊，使用
width，height，就好了。

解决flex布局导致子元素的宽度无效的问题

参考技术A 在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候。子元素的宽度就自适应了。
造成此问题的原因是因为，felx布局下有一个属性flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。0代表不会收缩

解决办法
1.子元素设置

2.子元素使用min-width代替width (此方法一般起不到很大的作用，只能解决宽度失效的问题，但会带来很多副作用：比如当子元素内容超出长度是，子元素的宽度就不再固定)

3.子元素设置