Question

我正在使用flexbox用于Wordpress网站。两列，子1应为页面的75％，子2为25％。对于子1中的小句子，它可以工作，但是，对于大的文本，它将孩子推到1到100％的页面宽度。长文本可能不会将div推到100％但是在div中包装。请参阅下面的jsfiddle示例。我怎样才能解决这个问题？相当新的。 TNX！

http://jsfiddle.net/luchtrat/jnys3u5p

body *{border: 1px solid red;} /* just to preview what's happening */

#parent {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  padding: 10px;
}
#child_1 {
  flex-grow: 2;
}
#child_2 {
  flex-grow: 1;
}

<div id="parent">
  <div id="child_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa.
  </div>
  <div id="child_2">Fusce nec egestas sapien.</div>
</div>
<div id="parent">
  <div id="child_1">Lorem ipsum dolor sit amet.</div>
  <div id="child_2">Fusce nec egestas sapien.</div>
</div>

Answer 1

不要复制ID。 ID应该是每页唯一的。改为使用类：
简单地使用：flex:2;和flex:1分别用于child_元素如果您希望获得flex:3→75%

25%

body * {border: 1px solid red;}

.parent {
  display: flex;
  flex-flow: row wrap;
  padding: 10px;
}
.child_1 {
  flex: 3; /* "75%" */
}
.child_2 {
  flex: 1; /* "25%" */
}

<div class="parent">
  <div class="child_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa.
  </div>
  <div class="child_2">Fusce nec egestas sapien.</div>
</div>
<div class="parent">
  <div class="child_1">Lorem ipsum dolor sit amet.</div>
  <div class="child_2">Fusce nec egestas sapien.</div>
</div>

在flexbox中换行文本，但保留不同文本长度的相对列宽

1 个答案: