时间戳

首页 > 解决方案 > 我的项目没有与 flex 对齐/没有移动响应

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

问题描述

我需要我的项目在两行中，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>

标签： htmlcssmobileflexbox

解决方案

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

  • 检查视频上的宽度属性（
    数量周围没有引号，也许这会影响某些东西）。

  • 此外，您的第一个 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

彼得·曼彻斯特

推荐阅读