基于内容的可调节框宽度 [英] Adjustable box widths based on content

问题描述

我是flexbox的新手，但我认为这是我想要做的最好的工具。我有一个产品的一些功能 - 像这样：

 < div class =flexbox-container> 
< div class =borderbox flexbox>关于第一个要素的内容段... ...< / div> 
< div class =borderbox flexbox>关于第二个功能的另一段内容...< / div> 
< div class =borderbox flexbox>第三个功能...< / div> 
< / div> 
  

...共有12个方块。请参阅 http://codepen.io/OsakaWebbie/pen/kkyYOp ，以查看我的实际内容klugey的方式得到的东西接近我想要的。我真正想要的是定义一个共同的高度的框，然后让flexbox根据内容调整宽度（最小化死区后较短的段落），但我不知道如何。 flex-basis：auto 听起来相关，但它对布局没有任何影响。我试过这个CSS：

  .flexbox {
 height：8em; 
 min-width：8em; 
 max-width：20em; 
} 
  

但是它忽略了 min-width 并使一切最大。目前我不得不调整标记，并指定一个宽度（或类等于一个宽度）每个框的基础上的内容，但我希望获得flexbox的力量自动做。可能吗？

解决方案

如果我理解你的话，你可以这样做。

通过给予flex项 flex：0 0 auto; ，它们将尽可能小，正确地遵守最小和最大宽度。 / p>

小提琴演示： https://jsfiddle.net/2bn9jrhj/

  .flexbox-container {display：flex; flex-wrap：wrap; justify-content：space-around;}。flexbox {height：8em; flex：0 0 auto; min-width：8em; max-width：20em;背景：#ddd; margin：2px;}  

 < div class = -container> < div class =borderbox flexbox>可以为中间的文字。< / div> < div class =borderbox flexbox>一个短文本。< / div> < div class =borderbox flexbox>可以长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。 < / div> < div class =borderbox flexbox>一个短文本。< / div> < div class =borderbox flexbox>可以长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。 < / div> < div class =borderbox flexbox>可以为中间的文字。< / div> < div class =borderbox flexbox>一个短文本。< / div> < div class =borderbox flexbox>可以为中间的文字。< / div> < div class =borderbox flexbox>可以长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。可以是长的文本。 < / div>< / div>  

I'm new to flexbox, but I'm assuming it's the best tool for what I'm trying to do. (If not, I'm open to other ideas.) I have a set of features of a "product" - something like this:

<div class="flexbox-container">
  <div class="borderbox flexbox">A paragraph of content about the first feature...</div>
  <div class="borderbox flexbox">Another paragraph of content about the second feature...</div>
  <div class="borderbox flexbox">The third feature...</div>
</div>

...with 12 boxes in all. See http://codepen.io/OsakaWebbie/pen/kkyYOp to see my real content with a klugey way of getting something close to what I want. What I really want is to define a common height for the boxes and then let flexbox adjust the widths based on the content (minimizing dead space after shorter paragraphs), but I can't figure out how. flex-basis:auto sounds relevant, but it didn't have any effect on the layout. I tried this CSS:

.flexbox {
  height: 8em;
  min-width: 8em;
  max-width: 20em;
}

But it ignored the min-width and made everything the max. Currently I'm having to tweak the markup and specify a width (or a class equating to a width) for each box based on its content, but I'm hoping to get the power of flexbox to do that automatically. Is it possible?

解决方案

If I understood you correct, you can do something like this.

By giving the flex item flex: 0 0 auto; they will be as small as possible, honoring the min- and max-width properly.

Fiddle demo: https://jsfiddle.net/2bn9jrhj/

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flexbox {
  height: 8em;
  flex: 0 0 auto;
  min-width: 8em;
  max-width: 20em;
  background: #ddd;
  margin: 2px;
}

<div class="flexbox-container">
  <div class="borderbox flexbox">A text that can be middle.</div>
  <div class="borderbox flexbox">A short text.</div>
  <div class="borderbox flexbox">A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long.
  </div>
  <div class="borderbox flexbox">A short text.</div>
  <div class="borderbox flexbox">A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long.
  </div>
  <div class="borderbox flexbox">A text that can be middle.</div>
  <div class="borderbox flexbox">A short text.</div>
  <div class="borderbox flexbox">A text that can be middle.</div>
  <div class="borderbox flexbox">A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long. A text that can be long.
  </div>
</div>

这篇关于基于内容的可调节框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！