使用flex布局，子元素怎么高度自适应

Posted 2023-04-11

父元素高度设置为空或者auto即可，如height:auto或者不要height;，举例如下: 1.高度采用auto; 这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐； 这是父级内容，宽度为800px,高度自适应 参考技术A 使用flex布局，子元素高度自适应方法：
父元素高度设置为空或者auto即可，如height:auto或者不要height;，举例如下: 1.高度采用auto; 这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐； 这是父级内容，宽度为800px,高度自适应

两栏布局——左侧固定右侧自适应

参考技术A 1、左边width:200px;右边width:calc(100%-200px)；

2、flex布局：父元素使用display:flex；子固定元素设置min-width即可

3、grid布局：父元素 display:grid; grid-template-columns: 60px 300px auto;

4、左元素浮动（BFC）

1）右侧元素添加margin-left，值为左侧元素宽度

2）右侧元素触发BFC（overflow:hidden/auto/scroll、绝对/固定定位、float、flex、grid等等）

3）右侧元素设置padding-left，并添加子元素作为新的右侧元素

5.左侧元素定位（BFC），右侧元素margin-left

6.左元素（BFC）：display:table-cell;width:60px;右侧元素随内容变化宽度