Question

当display:inline-flex flex-container看不到flex-container之后的h1的下边距或h1的上边距时，

但h1 { color: #555; } .flex-container { margin:40px auto; padding: 10px; background-color: #ddd; border-radius: 5px; list-style: none; box-sizing: border-box; } .flex-item { color: white; background-color: firebrick; border-radius: 5px; padding: 10px; margin: 10px; font-weight: bold; font-size: 2rem; box-sizing: border-box; } .flex-container { display: flex; /* flex | inline-flex */ // display: inline-flex; }看到了

我想了解为什么flex-container表现得如此

<h1>Flexbox</h1>
<ul class="flex-container">
    <li class="flex-item item-1">1</li>
    <li class="flex-item item-2">2</li>
    <li class="flex-item item-3">3</li>
    <li class="flex-item item-4">4</li>
    <li class="flex-item item-5">5</li>
    <li class="flex-item item-6">6</li>
    <li class="flex-item item-7">7</li>
    <li class="flex-item item-8">8</li>
</ul>
<h1>Bottom header</h1>

Build step 'Execute shell' marked build as failure
ERROR: Build step failed with exception
java.lang.NullPointerException
	at hudson.plugins.jira.JiraSession.createIssue(JiraSession.java:412)
	at hudson.plugins.jira.JiraCreateIssueNotifier.createJiraIssue(JiraCreateIssueNotifier.java:202)
	at hudson.plugins.jira.JiraCreateIssueNotifier.currentBuildResultFailure(JiraCreateIssueNotifier.java:357)
	at hudson.plugins.jira.JiraCreateIssueNotifier.perform(JiraCreateIssueNotifier.java:157)
	at hudson.tasks.BuildStepMonitor$3.perform(BuildStepMonitor.java:45)
	at hudson.model.AbstractBuild$AbstractBuildExecution.perform(AbstractBuild.java:744)
	at hudson.model.AbstractBuild$AbstractBuildExecution.performAllBuildSteps(AbstractBuild.java:690)
	at hudson.model.Build$BuildExecution.post2(Build.java:186)
	at hudson.model.AbstractBuild$AbstractBuildExecution.post(AbstractBuild.java:635)
	at hudson.model.Run.execute(Run.java:1840)
	at hudson.model.FreeStyleBuild.run(FreeStyleBuild.java:43)
	at hudson.model.ResourceController.execute(ResourceController.java:97)
	at hudson.model.Executor.run(Executor.java:429)
Build step 'JIRA: Create issue' marked build as failure
Finished: FAILURE

Answer 1

这就是内联块/ flex的工作方式。

看看这个jsfiddle

您期望2个div在同一行上，但是代替了第一个div的display: block属性，正是这种行为的体现。

您需要在#one div上添加display: inline-block才能获得期望的行为。

Answer 2

这是默认行为。

block级别元素的垂直边距折叠。
inline级别元素的垂直边距不会折叠。

根据specification：

inline-flex

弹性容器为其建立新的弹性格式上下文内容。这与建立块格式化上下文相同，除了使用flex布局而不是块布局。例如，浮点不会侵入flex容器，而flex 容器的边距不会随其内容的边沿而收缩。 Flex容器为其内容准确地形成一个包含块就像块容器一样。 [CSS21]溢出属性适用于弹性容器。

为什么Flex容器会像这样

2 个答案: