我是CSS新手，我想让五个框在左上角水平排列，最后一个框留在右下角，即使你调整浏览器的大小。我尝试使用flex来做到这一点，但是未能将 F 元素放在右 Angular 。您能告诉我该怎么做吗？
#container {
display: flex;
flex-flow: row nowrap;
}
#A, #B, #C, #D, #E, #F {
background: #eeeff2;
width: 100px;
height: 150px;
border-left: 10px dotted #D0D0FF;
margin-right:10px;
}
p {
font-family: Tahoma, sans-serif;
font-size:40px;
padding-left: 10px;
}
#A:hover, #B:hover, #C:hover, #D:hover, #E:hover, #F:hover {
background: yellow;
cursor: pointer;
color: goldenrod;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="styleB.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="A">
<p>A</p>
</div>
<div id="B">
<p>B</p>
</div>
<div id="C">
<p>C</p>
</div>
<div id="D">
<p>D</p>
</div>
<div id="E">
<p>E</p>
</div>
<div id="F">
<p>F</p>
</div>
</div>
</body>
</html>最佳答案
您必须需要为最后一个子元素设置边距#F{ margin-left:auto; }
#container {
display: flex;
flex-flow: row nowrap;
}
#A,
#B,
#C,
#D,
#E,
#F {
background: #eeeff2;
width: 100px;
height: 150px;
border-left: 10px dotted #D0D0FF;
margin-right: 10px;
}
#F {
margin-left: auto;
}
p {
font-family: Tahoma, sans-serif;
font-size: 40px;
padding-left: 10px;
}
#A:hover,
#B:hover,
#C:hover,
#D:hover,
#E:hover,
#F:hover {
background: yellow;
cursor: pointer;
color: goldenrod;
}<div id="container">
<div id="A">
<p>A</p>
</div>
<div id="B">
<p>B</p>
</div>
<div id="C">
<p>C</p>
</div>
<div id="D">
<p>D</p>
</div>
<div id="E">
<p>E</p>
</div>
<div id="F">
<p>F</p>
</div>
</div>关于html - 如何制作 Angular 落里的 flex 盒元素并具有响应能力？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62708009/