Question

我是CSS新手。当浏览器变小时，我想将框div移到下面；当浏览器为桌面尺寸时，我要将所有框的位置都移回列位置。我在源代码中添加了flex-wrap和flex-direction，但是什么也没有发生。我不知道我犯了什么错误。希望你们能帮助我解决这个问题。谢谢。

MATCH (a:A)-[:RELATED_TO]->(b:B)
RETURN b, COLLECT(DISTINCT a) AS aNodes
ORDER BY SIZE(aNodes) DESC
LIMIT 1;

Answer 1

它可以按预期弯曲，一次只能弯曲一次，而且屏幕尺寸很小。

要更好地控制它并立即进行弹性方向切换，请尝试使用媒体查询，例如下面的更新示例：

* {
  padding: 0;
  margin: 0;
}

.container-top {
  background-color: green;
  color: white;
}

.container-top-context {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.container-top-context h1 {
  font-size: 70px;
  word-spacing: 0.3em;
}

.container-top-context h2 {
  font-size: 20px;
  word-spacing: 0.2em;
}

.logo {
  background-color: yellow;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

.container-testimony-context {
  display: flex;
  flex-wrap: wrap;
}

.box-1 {
  flex: 1;
  background-color: #EF5350;
  color: #FFCDD2 padding:5px;
  text-align: center;
}

.box-2 {
  flex: 1;
  background-color: #AB47BC;
  color: #E1BEE7;
  padding: 5px;
  text-align: center;
}

.box-3 {
  flex: 1;
  background-color: #29B6F6;
  color: #B3E5FC;
  padding: 5px;
  text-align: center;
}

.box-4 {
  flex: 1;
  background-color: #66BB6A;
  color: #C8E6C9;
  padding: 5px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .container-testimony-context {
    flex-direction: column;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>my flex box</title>
</head>

<body>


  <div class="container-top">
    <div class="container-top-context">
      <h1>Road of Kalibaenan</h1>
      <h2>Gives exact direction to unusual creatures</h2>
      <div class="logo"></div>
    </div>
  </div>
  <div class="container-testimony-context">
    <div class="box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

  </div>


</body>

</html>

div不弯曲包装

1 个答案: