0

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?

Rob
  • 14,746
  • 28
  • 47
  • 65
OsakaWebbie
  • 645
  • 1
  • 7
  • 21
  • It's not clear how you want this too look but I suspect the Japanese characters aren't breaking correctly. - http://codepen.io/Paulie-D/pen/yabrag – Paulie_D Sep 26 '16 at 15:25
  • This might be relevant. Someone who has the exact opposite problem: http://stackoverflow.com/questions/7985021/css-flexbox-issue-why-is-the-width-of-my-flexchildren-affected-by-their-content – Tijmen Sep 26 '16 at 15:25
  • When wrapping with flexbox, you will have to specify the width / basis for the flex children here... and you are already giving `flex-basis: 200px`... – kukkuz Sep 26 '16 at 15:27
  • @Paulie_D: The Japanese breaks fine - in fact, it is more flexible than English in that it can break at any character. Until I added 'flex-wrap:wrap`, mine looked just like yours, with 12 equal-width boxes in a single row. I don't want the widths equal (unless all the boxes contain the same amount of content, which is not likely), and I don't want them all in one row (unless the screen is super-wide). – OsakaWebbie Sep 27 '16 at 05:38
  • @Tijmen: The example in that thread's OP is really old - the syntax they are using for flexbox doesn't seem to match how things work today. – OsakaWebbie Sep 27 '16 at 05:49
  • @kukkuz: So are you saying that what I want to do is not possible if I want to allow multiple rows of boxes (i.e. `flex-wrap:wrap`)? If I specify `width`, `max-width`, or `flex-basis`, the boxes are the same size (assuming there is ample content). If I don't specify any of them, each box consumes a whole row. If I remove `flex-wrap:wrap`, all the boxes are on one row no matter how narrow the window is. – OsakaWebbie Sep 27 '16 at 05:55
  • 1
    :) Exactly, that was what I was trying to tell you.. – kukkuz Sep 27 '16 at 06:35
  • 1
    Okay, I gave up on my unrealistic dream, and manually set the widths, aiming for each paragraph to be about 6 lines. But I did turn on flex-grow and flex-shrink so that my rows are usually the same width - it looks more orderly that way. You can see it in the context of my half-built website in [English](http://l4jp.com/en/kizunadb-en/) and [Japanese](http://l4jp.com/ja/kizunadb-ja/). Thanks for your input, everyone! – OsakaWebbie Sep 27 '16 at 11:05

0 Answers0