html - 使用 flexbox 限制宽度

Question

如何定位 :before和 :after内容到.container的边缘使用 flexbox？

我正在尝试定位 <在左边和>向右，但这些元素应根据 .container 对齐宽度。

我试过:

text-align: left;
max-width: 50%;

但不起作用。我在这里缺少什么？

* {
  margin: 0;
  padding: 0;
}
.main {
  background: #ccc;
  width: 100%;
}
.container {
  max-width: 500px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 8px 0;
}
.flexbox {
  display: flex;
  background: blue;
  justify-content: center;
  align-items: center;
}
.prev {
  border-right: 1px solid white;
}
.prev::before {
  content: '<';
}
.next::after {
  content: '>';
}
.link {
  color: white;
  padding: 16px 0;
  text-decoration: none;
  flex: 0 0 50%;
}
.link:first-child {
  padding-right: 10px;
  text-align: right;
  max-width: 50%;
}
.link:last-child {
  padding-left: 10px;
  text-align: left;
  max-width: 50%;
}

<div class="main">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam
    aut assumenda accusamus ex perferendis ipsa aperiam sapiente.
  </div>
</div>
<div class="flexbox">
  <a href="#" class="link prev">Preview</a>
  <a href="#" class="link next">Next</a>
</div>

https://jsfiddle.net/brunodd/4sq3gufn/1/

Answer 1

首先，把.flexbox在.container里面:

<div class="main">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam aut assumenda accusamus ex perferendis ipsa aperiam sapiente.
    <div class="flexbox">
      <a href="#" class="link prev">Preview</a>
      <a href="#" class="link next">Next</a>
    </div>
  </div>  
</div>

然后设置position:absolute对于 ::before和 ::after .

.prev {
  border-right: 1px solid white;
  &::before {
    position:absolute;
    left:20px;
    content: '<';
  }
}

.next {
  &::after {
    position:absolute;
    right:20px;
    content: '>';
  }
}

设置position:relative至 .container所以 <和 >将保留在其边界内:

.container {
  max-width: 500px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 8px 0 0 0;
  position:relative;
}

设置宽度为.flexbox成为100vw (视口(viewport)宽度)，并添加一些魔法 calc计算负数margin-left保持.flexbox在中间:

   .flexbox {
      display: flex;
      background: blue;
      justify-content: center;
      align-items: center;
      width:100vw;
      margin-left: calc((-100vw + 100%)/2);
    }

Working example here