如何使用内联样式显示 Flex？答案

【问题标题】：How to Display Flex using inline styling?如何使用内联样式显示 Flex？
【发布时间】：2021-03-01 05:54:08
【问题描述】：

我不能使用 CSS 来设置这个特定部分的样式。它与在 Google Maps Api 地图中工作有关。所以我必须使用内联样式来完成我需要的任务。我想并排显示图像和文本，但是我无法成功实现 display flex。任何帮助将不胜感激！

尝试的显示内嵌样式：Flex

content.push('<div style={{display: flex}}><img id="legend-icon" width="25" height="25" src="' + lights + '"><p>Lights in Sky</p></div>');

代码

  var content = [];
  content.push('<h1>Icon Legend</h1>');
  content.push('<img id="legend-icon" widht="25" height="25" src="' + lights + '"><p>Lights in Sky</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + alien + '"><p>Alien Sighting</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + ufo + '"><p>Abduction</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + redBlur + '"><p>Sighting within last week</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + greenBlur + '"><p>Sighting within last month</p>');
  content.push('<img id="legend-icon" width="25" height="25" src="' + blueBlur + '"><p>Sightings over a month</p>');

【问题讨论】：

style={{ ... }} 是无效的内联样式。正确的方法是使用style=" ... "。 ÌD's` 也必须是独一无二的。您多次使用相同的 ID，这使其无效。在这种情况下，你必须使用类。

标签： javascript html css flexbox

【解决方案1】：

您可以尝试创建一个<div> 标签（包含所有<img> 子标签），属性为style = "display: flex; flex-wrap: wrap;"

之后，您可以输入您的content。

您可以将style = "display: flex; flex-wrap: wrap;" 替换为 style = "display: flex; flex-wrap: nowrap;"，如果你想要内容显示在一行上。

例如：

<div style = "display: flex; flex-wrap: wrap;">
    //push html of content[] here
</div>

最后，如果您有多个<img> 内容标签并且您想为所有内容添加css，您应该使用class = "legend-icon" 而不是id = "legend-icon"

【讨论】：

【解决方案2】：

你应该使用常规的 html 语法：

content.push('<div style="display:flex"><img className="legend-icon" width="25" height="25" src="' + lights + '"><p>Lights in Sky</p></div>');

【讨论】：