我的项目没有与 flex 对齐/没有移动响应

Question

我需要我的项目在两行中，h3 和列表作为一行，视频在第二行。

h3 和列表位于顶行，视频位于下方。此外，当我检查它在手机/平板电脑设置上不是移动响应时。

.features section {
  display: flex;
  flex-direction: row;
  flex-flow: row;
  width: 100%;
}


h3{
  position: static;
  height: 47px;
  left: 0px;
  top: 0px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: 130%;  
  display: flex;
  align-items: center;
  color: #262424;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 24px

<div class="bg-white overflow-hidden">
  <div class="features">
    <div class="flex relative max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <section>
        <h3 class="flex-1"> Features</h3>
        <ul>
          <li>Easy group conversation </li>
          <li>Free movement</li>
          <li>Emojo</li>
          <li>Private messages</li>
          <li>Presenting</li>
          <li>Tags</li>
        </ul>
        <video class="flex-2" width=869px height="346px" autoplay loop muted>
          <source src="video.mp4" type="video/mp4">
        </video>
      </section>
    </div>
  </div>
</div>

Answer 1

代码本身存在一些问题...

• 检查视频上的宽度属性（周围没有引号
  金额，也许这会影响某些事情）。

• 另外，你的第一个 CSS 选择器是 .features section，但是有 没有<section> 标签，所以要么添加一个你想要的部分标签 样式或将其从 CSS 选择器中删除。

• 通常，您的列表项应位于无序列表中 元素<ul>。

• 此外，示例代码中有一个未闭合的 div（但我知道
  这可能只是一个例子）。

• 在您的 H3 样式中，您有 display: flex，然后是 flex: none。

我认为将您想要的元素放在它们自己的 div 内的每一行中会更容易，然后将其样式化为 flex-row。 然后，您可以选择如何在每行中设置它们的样式。

（除非您使用的是 Bootstrap 之类的东西，在这种情况下有更简单的方法）。

我最喜欢的 CSS flexbox 备忘单是这个... https://css-tricks.com/snippets/css/a-guide-to-flexbox/

另外，我在 codepen 上提出了一个建议，也许会有所帮助。

https://codepen.io/petermanchester1987/pen/KKMrOeG

彼得·曼彻斯特

Answer 2

只需添加一个中断，这是一个简单的div，并应用了以下 CSS 属性。这也迫使您将 flex-wrap: wrap 添加到 flex 父级。

如果您希望下一组元素位于新行中，请在这些元素之前添加 <div class="break"></div>。

您可以添加justify-content: space-between; 以使功能列表旁边的视频在您的页面中均匀分布，但这不是必需的（如果没有它，它将显示在列表旁边）。

.features section {
  display: flex;
  flex-wrap: wrap; /* Add this for breaks to work */
  width: 100%;
  /* justify-content: space-between;  Distribute items evenly on each row */
}

.break {
  flex-basis: 100%;
  height: 0;
}

.video {
  background-color: red;
  width: 300px
}

<div class="features">
  <div>
    <section>
      <h3>Features</h3>
      <div class="break"></div>
      <ul>
        <li>Easy group conversation </li>
        <li>Free movement</li>
        <li>Emojo</li>
        <li>Private messages</li>
        <li>Presenting</li>
        <li>Tags</li>
      </ul>
      <div class="video">VIDEO GOES HERE</div>
      <!-- Replace this with your video element -->
    </section>
  </div>
</div>

此外，您的视频元素在宽度属性上缺少" "。