Question

我有一组flexboxed div。我希望他们根据宽度自动调整。在子项上使用$Template = ($Certificates.extensions | where-object{$_.oid.FriendlyName -match "Certificate Template Information"}).format(0)，它似乎适用于文本，但不适用于每个文本的伪元素（在本例中为箭头）。我需要做些什么才能使flexbox包含flexbox的宽度？

HTML：

flex: 1 1 auto

CSS：

<div class="entries">
  <div class="entry">
    <a href="#">Short</a>
  </div>
  <div class="entry">
    <a href="#">Longer</a>
  </div>
  <div class="entry">
    <a href="#">Longest</a>
  </div>
  <div class="entry">
    <a href="#">Looooongest</a>
  </div>
</div>

Example here - 缩小窗口：最后一个div的箭头将消失，而不是让第一个div缩小...

Answer 1

注意，锚和它的伪不是Flexbox本身的一部分，它只是entries（flex容器）和entry（flex项）是flex元素。

箭头被隐藏的原因是伪是绝对定位的，因此在计算锚点的大小时不会考虑它（绝对定位的元素被取出流量）），这将间接影响Flexbox如何计算entry

的大小

如果您在a上添加左侧填充并将left更改为0，则可以使用。

请参阅CSS中的注释

＆＃13;

.entries {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 1px;
  padding-top: 1px;
  border-top: 1px solid #901a1e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.entry {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 11px 0;
  width: 100%;
  text-align: center;
  background: #f3f3f1;
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f1), to(#edece9));
  background: linear-gradient(to bottom, #f3f3f1 0%, #edece9 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f1', endColorstr='#edece9', GradientType=0);
  position: relative;
}

.entry a {
  font-size: 15px;
  display: inline-block;
  letter-spacing: 0.06em;
  line-height: 20px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
  padding-left: 18px;                      /*  added  */
}

.entry>a:before {
  font-size: 14px;
  position: absolute;
  left: 0;                                 /*  changed  */
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  color: #901a1e;
  content: '>';
  font-weight: 700;
}

.entry+.entry:after {
  content: '';
  width: 1px;
  height: 70%;
  position: absolute;
  top: 6px;
  left: 0;
  background-color: #901a1e;
}

＆＃13;

<div class="entries">
  <div class="entry">
    <a href="#">Short</a>
  </div>
  <div class="entry">
    <a href="#">Longer</a>
  </div>
  <div class="entry">
    <a href="#">Longest</a>
  </div>
  <div class="entry">
    <a href="#">Looooongest</a>
  </div>
</div>

＆＃13;

由于您已经使用了Flexbox，因此可以使用它来解决您遇到的问题，并通过使锚a成为灵活容器来垂直居中文本/箭头。

请参阅CSS中的注释

＆＃13;

.entries {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 1px;
  padding-top: 1px;
  border-top: 1px solid #901a1e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.entry {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 11px 0;
  width: 100%;
  text-align: center;
  background: #f3f3f1;
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f1), to(#edece9));
  background: linear-gradient(to bottom, #f3f3f1 0%, #edece9 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f1', endColorstr='#edece9', GradientType=0);
  position: relative;
}

.entry a {
  font-size: 15px;
  display: inline-flex;                /*  added  */
  align-items: center;                 /*  added  */
  letter-spacing: 0.06em;
  line-height: 20px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
}

.entry>a:before {
  font-size: 14px;
  color: #901a1e;
  content: '>';
  font-weight: 700;
  padding-right: 5px;                  /*  added  */
}

.entry+.entry:after {
  content: '';
  width: 1px;
  height: 70%;
  position: absolute;
  top: 6px;
  left: 0;
  background-color: #901a1e;
}

＆＃13;

<div class="entries">
  <div class="entry">
    <a href="#">Short</a>
  </div>
  <div class="entry">
    <a href="#">Longer</a>
  </div>
  <div class="entry">
    <a href="#">Longest</a>
  </div>
  <div class="entry">
    <a href="#">Looooongest</a>
  </div>
</div>

＆＃13;

Answer 2

Flex容器中的伪元素是弹性项目。

绝对定位的弹性项目将从文档流程中删除，不再接受弹性属性。

因此，如果您希望伪项的行为与DOM项相似，请不要使用绝对定位。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

Flexbox水平对齐：使内容适合 - 包括伪元素

2 个答案: