将 div 与其他元素混合时的 Flexbox 行为答案

【问题标题】：Flexbox behaviour when mixing div with other elements将 div 与其他元素混合时的 Flexbox 行为
【发布时间】：2018-06-19 21:21:04
【问题描述】：

在以下代码中：

<!DOCTYPE html>
<head>
<style>
a:link {color:rgba(0,0,0,1); background-color:rgba(160,15,15,1); text-decoration:none;}
a:visited {color:rgba(0,0,0,1); background-color:rgba(160,15,15,1); textdecoration:none;}
a:hover {color:rgba(255,27,24,1); background-color:rgba(138,75,65,1); textdecoration:none;}
a:active {color:rgba(150,228,0,1); background-color:rgba(110,60,0,1);textdecoration:none;}


a { border:2px solid rgba(120,3,3,1);border-radius:10%;padding:2px;font-color:rgba(255,0,0,1);
  }
</style>
</head>
<body>
<div style="display:flex;flex-flow:row wrap;">
<a href="">Link1</a>
<div><a href="">Link2</a></div>
<div><a href="">Link3</a></div>
<span><a href="">Link4</a></span>
<a href="">Link5</a>
<a href="">Link6</a>
<a href="">Link7</a>
<a href="">Link8</a>
</div>
<p>
Test Test Test
</p>
</body>
</html>

为什么div 和span 嵌入元素会改变对齐方式？最初我认为这是因为div 具有与链接不同的属性（链接是内联元素，而 div 是块）。但是嵌入 span（内联元素）而不是 div 具有相同的效果。

有人吗？非常感谢。

【问题讨论】：

标签： html flexbox

【解决方案1】：

没有元素在改变对齐方式。

如果您进入 Chrome 或任何其他具有 Devtool 的浏览器并检查这些 div 的高度并将它们与其他 <a> 进行比较，您将看到它们的高度相同，但是由于您没有分配边框或一个你看不到发生了什么的背景，所以让我们试试吧。

body>div>* {
  background: lime;
}

a {
  border: 2px solid rgba(120, 3, 3, 1);
  border-radius: 10%;
  padding: 2px;
  color: rgba(255, 0, 0, 1);
}

<div style="display:flex;flex-flow:row wrap;">
  <a href="">Link1</a>
  <div><a href="">Link2</a></div>
  <div><a href="">Link3</a></div>
  <span><a href="">Link4</a></span>
  <a href="">Link5</a>
  <a href="">Link6</a>
  <a href="">Link7</a>
  <a href="">Link8</a>
</div>

正如您所看到的，所有直接子级的高度都相同，这就是 flex 所做的，但是为什么 div 和 span 内的 a 有点上升，这是由于内联级别元素的显示方式，内联级别元素显示为文本，所以它的行为方式与块非常不同，但下面的空间是为Descenders保留的。像你一样设置边框也会超出父母的边界，但只能从顶部和底部开始，填充的行为方式相同，你可以看到它从顶部和底部增长，但这不会影响周围的元素，只会从右侧和左侧影响它们，这些只是内联元素和块级元素之间的一些区别。

轻松修复将您的<a> 设置为inline-block，当涉及到它们需要多少空间时，仍会将它们视为内联级元素，但它会给出它们的块，因此它会影响所有侧面的周围元素。

【讨论】：