为sibbling元素提供与flexbox属性相同的“填充”justify-content：space-around

Question

很抱歉谋杀了这个头衔。但我不确定如何总结我的问题。

我希望页脚中的文本与我的列表具有相同的填充（正好在下面）。这可能吗？

小提琴：https://jsfiddle.net/dyLnbr4a/

section {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}

article {
  border: 1px solid darkgoldenrod;
}

aside {
  border: 1px solid wheat;
}

footer {
  border: 1px solid salmon;
}

<section>
  <article>
    <ul>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
    </ul>
  </article>
  <aside>
    <picture>
      <img src="https://d2btg9txypwkc4.cloudfront.net/media/catalog/category/Kampanjer_1.jpg" alt="image description" style="max-width: 460px">
    </picture>
  </aside>
</section>
<footer>
  this is a footer
</footer>

Answer 1

您可以在页脚上使用pseudoelement来模仿图像占用的空间。 （如果图像大小是动态的，这种方法不会真正起作用）

fiddle

section {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}

article {
  border: 1px solid darkgoldenrod;
}

aside {
  border: 1px solid wheat;
}

footer {
  border: 1px solid salmon;
  display: flex;
  justify-content: space-around;
  /* default padding assigned to <ul> */
  padding-left: 40px;
}

footer:after {
  content: '';
  display: block;
  width: 330px;
  max-width: 460px;
}

<section>
  <article>
    <ul>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
    </ul>
  </article>
  <aside>
    <picture>
      <img src="https://d2btg9txypwkc4.cloudfront.net/media/catalog/category/Kampanjer_1.jpg" alt="image description" style="max-width: 460px">
    </picture>
  </aside>
</section>
<footer>
  this is a footer
</footer>