我制作了一个包含一些信息的盒子。在这个框中，我使用 flexbox 来定位文本和元素。问题是，在右侧我有一个上下箭头。当缩小浏览器时，我希望上下箭头位于“软件工程师”下方，但这种情况不会发生。
我尝试使用:
.profile-box-header{
display:flex;
flex-wrap:wrap;
}
并为此进行 flex 增长。请检查 jsfiddle:
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.profile-box-wrapper{
width:500px;
height:150px;
background:rgb(253, 253, 253);
border-radius:4px;
margin: 10px 10px;
display:flex;
flex-direction: column;
}
.profile-box-header img{
width:70px;
height:70px;
margin:5px 0 0 10px;
}
.profile-box-header{
display:flex;
flex-wrap:wrap;
}
.profile-name{
margin-left:10px;
flex-grow:1;
}
.profile-name h3{
}
.profile-right {
margin:0;
text-align:right;
margin-right:5px;
flex-grow:2;
}
.profile-box-content{
margin:15px 0 0 10px;
}
.profile-right img{
width:25px;
height:25px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe@test.nl</h3>
<p>A cool dude</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>谁能解释一下在缩小浏览器时如何使用 flexbox 使元素相互重叠。谢谢。
最佳答案
您需要更改Flex Direction 并在Media Queries 的帮助下进行设置，我编辑了您的代码并检查了此解决方案:
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
padding: 10px;
}
.profile-box-wrapper{
width:500px;
background:rgb(253, 253, 253);
border-radius:4px;
padding: 10px;
}
.profile-box-header{
display:flex;
align-items: center
}
.profile-box-header img{
width:70px;
height:70px;
}
.profile-name{
margin-left:10px;
}
.profile-right {
height:70px;
margin-left:auto;
text-align:right;
}
.profile-right img{
width:25px;
height:25px;
}
.profile-box-content{
margin-top:15px;
}
@media(max-width: 520px){
.profile-box-wrapper{
width: calc(100% - 20px);
}
.profile-box-header{
flex-direction: column;
}
.profile-right {
height: inherit;
margin-left: inherit;
margin-top: 10px;
text-align: center;
}
.profile-box-content{
text-align:center;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe@test.nl</h3>
<p>Software-engineer</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>问题2的答案:
p{
font-size: 80%;
opacity: .4;
}
div {
border: 5px solid green;
margin: 5px;
padding: 5px;
}
.container {
display: flex;
border-color: blue;
}
.container > div {
border-color: red;
}
.line {
position: relative;
}
.line:before{
content: "";
position: absolute;
margin: auto;
width: 100%;
height: 2px;
top: 0;
bottom: 0;
left: 0;
background-color: grey;
}<p>// In this state you can see that all children has the same height , no problem</p>
<div class="container">
<div>child 1</div>
<div>child 2</div>
<div>
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now let's make the height of children diffrent, this will look messy because they aren't centred at the same line</p>
<div class="container line">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now let's centre the children at the same line this will be perfect add to our parent container <b>align-items: center;</b></p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Put the last child to the right using <b>margin-left: auto;</b></p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;margin-left: auto;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now our <b>child 3</b> should be at the top of his parent so , it should take the max height of his parent but our parent has default height so it will take the max height of his children , in this state <b>child 2</b> has the max height, so we will set the height of <b>child 3</b> at same height or heigher then <b>child 2</b> wich is in this state <b> child 2 height > 120px</b> </p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:120px; margin-left: auto;">
<div>child of child 3</div>
</div>
</div>关于html - 缩小浏览器窗口时将 flexbox 放在彼此下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52857474/