Question

我是CSS的新手，即使您调整浏览器的大小，我也想让五个框在左上角水平排列，最后一个留在右下角。我尝试使用flex来做到这一点，但是未能使F元素位于右上角。您能告诉我该怎么做吗？

#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>

Answer 1

您需要为最后一个孩子#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>

如何在角落制作Flexbox项目并做出响应？

1 个答案: