0

是否可以使.item-1高度灵活并调整.item-2高度？例如：

  • 如果.item-1高度是10%那么.item-2高度是90%
  • 如果.item-1高度是11%那么.item-2高度是89%

.item-1因此，我们应该根据内容调整它的大小。

HTML

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
</div>

CSS

html,
body,
.container {
    height: 100%;
}
.container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}
.item {
    background: #eee;
    margin: 1px;
}
.item-1 {
  -webkit-box-flex: 3 3 100%;
  -moz-box-flex: 3 3 100%;
  -webkit-flex: 3 3 100%;
  -ms-flex: 3 3 100%;
  flex: 3 3 100%;
}
.item-2 {
  -webkit-box-flex: 1 1 100%;
  -moz-box-flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
}

JSFiddle：http: //jsfiddle.net/vpetrychuk/SYZtg/2

4

1 回答 1

1

您不能使用 2009 Flexbox 属性执行此操作，因为没有任何东西可以与该flex-basis属性相媲美（box-flex2009 年草案中的flex属性与现代草案中的属性不同，因为它只能接受单个浮点值而不是大于 0-2 个整数和 0-1 个长度）。

http://codepen.io/cimmanon/pen/AGLge

html,
body,
.container {
  height: 100%;
}

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.item {
  background: #eee;
  margin: 1px;
}

.item-1 {
  -webkit-flex: 1 1 10%;
  -ms-flex: 1 1 10%;
  flex: 1 1 10%;
}

.item-2 {
  -webkit-flex: 1 1 90%;
  -ms-flex: 1 1 90%;
  flex: 1 1 90%;
}
于 2013-10-02T17:24:27.710 回答