Question

我最近一直在玩display:flex，因为我看到它变得更趋势。在快速测试中，使用flex和非flex CSS方法，我意识到，使用flex时我的宽度和边距总是得到尊重。这是一个很好的方法，考虑到我很可能还需要元素之间的沟槽？此外，跨度之间的差距来自何处？这就是我的意思：

HTML

<div class="container">
  <div class="box">
    <span class="inner-box">This gives me a 30px X 60px</span>
    <span class="inner-box">This gives me a 30px X 60px</span>
    <span class="inner-box">This gives me a 30px X 60px</span>
  </div>  
  <div class="box2">
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
  </div>  
</div>

CSS

.box{
  background: orange;
  display:flex;
  flex-direction:row-reverse;
  padding:0 10px;
}

.box2{
  background: green;
  text-align:right;
  padding:0 10px;
}

.inner-box{
  width:30px;
  background:#fff;
  margin:0 0px;
}

注意运行时的宽度

DEMO

Answer 1

您正在使用<span>个元素。它们默认为内联。内联元素会自动忽略width。

但是，在第一个div部分（.box）中，span的内联display值被父级display: flex覆盖，后者建立了width一个flex formatting context。因此，所有儿童都成为弹性项目，尊重height和display。

Flex Items

弹性项为其内容建立新的格式化上下文。该   此格式化上下文的类型由其div值确定，   照常。但是，弹性项目本身是 弹性级别 框，而不是   块级框：它们参与其容器的flex   格式化上下文，而不是块格式化上下文。

^{来源：https://drafts.csswg.org/css-flexbox-1/#flex-items}

在第二个.box2部分（span）中，display: inline元素仍为width，因为它们未从block-formatting context删除，而且height <1}}和display: inline-block分配将被忽略。

试试$('#button').click(function() { var servicetype = $("#servicetype").val(); var service = $("#service").val(); var adults = $("#adults").val(); var children = $("#children").val(); var days = $("#days").val(); window.open("https://secure.sample.com/service.aspx?&days="+days+"&service="+service+"&adults="+adults+"&children="+children+"&servicetype="+servicetype+"", "_blank"); });：http://codepen.io/anon/pen/yeggOy

参考文献：

Answer 2

你的问题有点不清楚，但是，正如MrLister评论的那样：

如果display:flex符合宽度，display:inline不符合？如果是这样，答案是肯定的，。

这是因为，根据spec，

Flex项目绘制与内联块完全相同

因此受宽度语句的影响。

为什么flexbox中的宽度处理方式不同？

2 个答案: