html - 当我用 包裹 div 时破坏了 flexbox 布局

Question

标签： htmlcssflexbox

Answer 1

您可以设置display: contents为.flex_container>a

内容

元素本身不会生成任何框，但其子元素和伪元素仍会生成框，并且文本会正常运行。出于盒子生成和布局的目的，该元素必须被视为已在元素树中被其内容替换（包括其源文档子元素及其伪元素，例如 ::before 和 ::after伪元素，通常在元素的子元素之前/之后生成）。 ^参考

.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
}

.flex_container {
  display: flex;
  justify-content: space-around;
}

.box {
  background: silver;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

.flex_container>a {
  display: contents;
}

<header>
  <div class="container flex_container">
    <div class="box">link1</div>
    <div class="box">link2</div>
    <div class="box">link3</div>
    <div class="box">link4</div>
    <a href="example.com">
      <div class="box">link5</div>
    </a>
  </div>
</header>