css - 网站布局分为行和列 - 对齐问题

Question

我想创建一个布局，将我的页面拆分为行和模块。

Row 只是一个全宽的 flex div，它包含我称之为模块的其他元素，如下图所示:

正如您还看到的，当我有一个专栏时，内容居中 - 但这不是规则。但我希望能够将内容居中(可以是任何内容)。

当我有两列时，左边一列应该右对齐，右边一列应该左对齐。 “在中心”有一些边距。

问题是，当我在玩 css 沙盒时，看起来我得到了我想要的东西。但是，当我将它移至我的元素时，它不起作用。主要是左列没有按应有的方式右对齐。怎么了？

哦，当然一切都应该是响应式的:)

:root {
--default-padding: 20px;
--default-margin: 20px;
--double-margin: calc(var(--default-margin) * 2);
--double-padding: calc(var(--default-padding) * 2);
}

.row {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: top;
    width: 100%
  }

.row > div {
   flex-grow: 1;
   width: 0px;
   min-width: 200px; /* it makes flex responsive */
}

.row > div:first-child > * {
   margin-left: auto;
   margin-right: var(--default-margin);
   text-align: right;
}

.row > div:last-child > * {
   margin-left: var(--default-margin);
}

img {
    max-width: 100%;
    height: auto; /* responsive image */
}

<div class="row">
    <div>
        <h1 style="text-align: center">Centered content</h1>
    </div>
</div>

<div class="row">
    <div>
        <img src="img.jpg" id="main_img"/>
    </div>

    <div>
      <p>
        <h1>Some header</h1>
        <ul>
          <li>list item</li>
          <li>list item</li>
        </ul>
      </p>
      <button class="cta module-right">ZAMÓW TERAZ</button>
    </div>
</div>

那么，这段代码有什么问题呢？ (这些是我在 css 的开始，我主要是桌面和后端程序员)

Answer 1

实现此目的的最佳方法是通过 display: flex;。如果您不熟悉它，我建议您从这里了解它 https://css-tricks.com/snippets/css/a-guide-to-flexbox/因为这会让你更容易。我已经完成了您想使用 flex 实现的示例代码。希望这有帮助

HTML

<div class="d-flex flex-row justify-content-center">
  <h1>Centered content</h1>
</div>

<div class="d-flex flex-row justify-content-center">

  <div class="img-box">
    <img src="https://via.placeholder.com/150" />
  </div>

  <div class="flex-column">
    <div>
      <h1 class="no-margin">Some header</h1>
      <ul>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>
    <div>
      <button>ZAMÓW TERAZ</button>
    </div>
  </div>

</div>

CSS

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.img-box {
  margin-right: 1rem;
}

.no-margin {
  margin: 0;
}

JS Fiddle 链接:https://jsfiddle.net/SJ_KIllshot/gh6d5uzy/1/