在flex容器中奇怪地包装文本和锚元素

时间：2016-12-12 23:23:21

标签： html css css3 flexbox

我有一个简单的文本块，共享一个带有display: flex标记的<a>容器。

不幸的是，包装有点奇怪，几乎好像<a>标签的“真”宽度没有被这样处理，或者它的宽度为0（根据它的定位来判断）

是否有一些样式我可以应用于<a>代码，使其更像“文字”？

enter image description here

enter image description here

enter image description here

JSFiddle 

body {
  font-size: 32px;
}
body > .container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
body > .container > .foot {
  flex: 1 0 100%;
  background-color: grey;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
body > .container > .foot > .content {
  flex: 1 0 70%;
  width: 50%;
  height: 350px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  text-align: center;
}
<div class='container'>
  <div class='foot'>
    <div class='content'>
      We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a>&nbsp; for updates.
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：4)

答案

你有text-align: center适用于文本，但不适用于锚元素。

你有justify-content: flex-start适用于锚元素，但不适用于文本。

您只需切换到justify-content: center。

revised fiddle 

body {
  font-size: 32px;
}
body > .container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
body > .container > .foot {
  flex: 1 0 100%;
  background-color: grey;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
body > .container > .foot > .content {
  flex: 1 0 70%;
  width: 50%;
  height: 350px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;  /* ADJUSTED */
  align-items: center;
  align-content: center;
  text-align: center;
}
<div class='container'>
  <div class='foot'>
    <div class='content'>
      We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a>&nbsp; for updates.
    </div>
  </div>
</div>

说明

您写道：

  

我有一个简单的文本块，共享一个带有display: flex标记的<a>容器。

嗯，你的文本块并不像你想象的那么简单。

你没有处理单个字符串。

您实际拥有的是具有三个弹性项目的弹性容器：

  • 在锚元素
    • 之前包装文本的匿名弹性项目
  • 锚元素
  • 在锚元素
    • 之后包装文本的匿名弹性项目

来自规范：

  

4. Flex Items

     

Flex容器的每个in-flow子项都变为flex项，每个都是   连续运行的文本直接包含在flex中   容器包装在一个匿名的flex项目中。

您看到的行为包括三个弹性项目。

锚文本本身不会换行，因为它等同于一个单词。但是如果你在锚点中添加空格和文本，它将像其他所有内容一样包装。

另见这篇文章：

相关问题
最新问题