flex布局的时候width:100%或overflow:hid
2021-02-24 本文已影响0人
蜗牛Coming
1.当flex布局的时候，width：100%不生效，解决办法是给子元素设置为绝对定位。
2.当flex:1的时候，overflow:hidden不生效，解决办法是给子元素添加width：0；
以下是演示demo：
**************************第一个问题************************
1，当一层flex布局的时候，设置子元素的width:100%就没有问题；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.demo {
width: 300px;
height:300px;
display: flex;
background-color: pink;
flex-direction: column;
align-items: center;
}
.top {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="demo">
<p class="top">
一行文字一行文字一行文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字
</p>
<div class='bottom'>
我是底部
</div>
</div>
</body>
</html>
效果如下：
image.png
2，当页面中多层flex布局嵌套的时候，设置其中子元素的width：100%会不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 500px;
background-color: yellow;
display: flex;
overflow: hidden;
}
.tab {
width: 150px;
height: 100%;
background-color: blue;
}
.demo {
flex: 1;
display: flex;
background-color: pink;
flex-direction: column;
align-items: center;
}
.top {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 40px;
line-height: 40px;
}
.bottom {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class='box'>
<p class='tab'>我是左侧tab部分</p>
<div class="demo">
<p class="top">
一行文字一行文字一行文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字
</p>
<div class='bottom'>
我是底部
</div>
</div>
</div>
</body>
</html>
效果如下：
image.png
3，把元素设置为绝对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 500px;
background-color: yellow;
display: flex;
overflow: hidden;
}
.tab {
width: 150px;
height: 100%;
background-color: blue;
}
.demo {
flex: 1;
display: flex;
background-color: pink;
flex-direction: column;
align-items: center;
position: relative;
}
.top {
position: absolute;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 40px;
line-height: 40px;
}
.bottom {
margin-top: 40px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class='box'>
<p class='tab'>我是左侧tab部分</p>
<div class="demo">
<p class="top">
一行文字一行文字一行文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字
</p>
<div class='bottom'>
我是底部
</div>
</div>
</div>
</body>
</html>
效果如下图：
image.png
**************************第二个问题************************
1，首先当一层flex布局的时候，flex:1与overflow:hidden没有问题；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
}
.demo {
width: 300px;
height: 300px;
display: flex;
background-color: pink;
}
.left {
width: 50px;
height: 50px;
background-color: red;
}
.right {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="demo">
<div class='left'>
我是左侧
</div>
<p class="right">
一行文字一行文字一行文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字
</p>
</div>
</body>
</html>
效果如图：
image.png
2，当我们变成嵌套flex布局的时候，样式就不生效了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 500px;
background-color: yellow;
display: flex;
overflow: hidden;
}
.tab {
width: 150px;
height: 100%;
background-color: blue;
}
.demo {
flex: 1;
display: flex;
background-color: pink;
}
.left {
width: 50px;
height: 50px;
background-color: red;
}
.right {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class='box'>
<p class='tab'>我是左侧tab部分</p>
<div class="demo">
<div class='left'>
我是左侧
</div>
<p class="right">
一行文字一行文字一行文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字
</p>
</div>
</div>
</body>
</html>
效果如图：
image.png
3，这是，只需要给子元素设置width：0就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 500px;
background-color: yellow;
display: flex;
overflow: hidden;
}
.tab {
width: 150px;
height: 100%;
background-color: blue;
}
.demo {
flex: 1;
display: flex;
background-color: pink;
}
.left {
width: 50px;
height: 50px;
background-color: red;
}
.right {
flex: 1;
width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class='box'>
<p class='tab'>我是左侧tab部分</p>
<div class="demo">
<div class='left'>
我是左侧
</div>
<p class="right">
一行文字一行文字一行文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字文字一行文字一行文字一行文字
</p>
</div>
</div>
</body>
</html>
效果如图：
image.png
