时间戳

首页 > 解决方案 > 将 div 与其他元素混合时的 Flexbox 行为

html - 将 div 与其他元素混合时的 Flexbox 行为

问题描述

在以下代码中：

<!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 是块）。但是嵌入 a span（内联元素）而不是 adiv具有相同的效果。

任何人 ？非常感谢。

标签： htmlflexbox

解决方案

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

如果您进入 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保留的。像你一样设置边框也会超出父母的边界，但只能从顶部和底部开始，填充的行为方式相同，你可以看到它从顶部和底部增长，但这不会影响周围的元素，只会从右侧和左侧影响它们，这些只是内联元素和块级元素之间的一些区别。

Easy fix set your <a>to inline-block，当涉及到它们需要多少空间时，仍然会将它们视为内联级别元素，但它会给出它们的块，因此它会影响所有侧面的周围元素。

推荐阅读