Question

这里有一个jsfiddle：https://jsfiddle.net/wwucLo3c/当没有青色div时，我需要红色div为全宽。如果有，他们都必须是50％。

这是容器的CSS：

.container{
    position:relative;
    width:100%;
    height:100%;
    background:blue;

    display:flex;
    flex-direction:row;
    align-content:stretch;
}

项目的内容：

.item{
    position:absolute;
    top:10%;
    flex:1 1 1;
    min-width:50%;
    height:10%;
}

基本上，如果没有其他项目的宽度，我需要一个绝对定位的项目，如果有，则需要缩小。它甚至可能吗？似乎我尝试了每个弹性箱设置并没有任何帮助。

Answer 1

甚至可能吗？

否，您无法设置弹性布局属性（订单除外）以使用position: absolute

来展示儿童

Absolutely-Positioned Flex Children

Flex容器的绝对定位的子容不会参与flex布局。但是，它确实参与了重新排序步骤（见顺序），这对他们的绘画有影响顺序。

<强>解决方案：

移除position: absolute并使用margin-top更改排名。
flex: 1 1 1不正确。最后一个值flex-basis不接受无单位值（0和auto除外）

Updated JSfiddle

body {
  width: 300px;
  height: 600px;
  margin: 0;
}
html {
  width: 100%;
  height: 100%;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: blue;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}
.item {
  flex: 1 1 0;
  height: 10%;
  margin-top: 10%;
  min-width: 50%;
}

<h2>Multiple items</h2>
<div class="container">
  <div class="item" style="background:tomato"></div>
  <div class="item" style="background:cyan"></div>
</div>
<h2>Single item</h2>
<div class="container">
  <div class="item" style="background:tomato"></div>
</div>

Answer 2

首先，您需要使用flex样式的正确语法。

.item {
    flex: 1 1 auto;
}

使用position: relative代替项目更容易见jsFiddle

如果有必要使用绝对位置，那么你需要将这些项目包装在一个包装器中并绝对定位。见jsFiddle

如何在相对定位的flexbox容器内获得绝对定位的项目以进行增长？

2 个答案: