1

I want to make flexbox with responsive to content items. Here is example code:

HTML:

.container {
  width: 200px;
  height: 400px;
  display: flex;
  flex-flow: row wrap;
}

.item {
  flex-basis: 40px;
  background-color: orange;
  margin: 0 10px 10px 0;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item">this is text content and again and again this is text content and again and again</div>
</div>

And this is what I want to achieve:

enter image description here

How can I achieve that behavior? Thanks!)

Huangism
  • 16,278
  • 7
  • 48
  • 74
bashkovpd
  • 598
  • 1
  • 7
  • 21

3 Answers3

2

If you want your page to be responsive to different resolution then u shouldn't adopt the habit of defining height and width in terms of px.

instead try to put width and height interms of % , width defined in % tend to adjust with resolution but width defined in terms of px tend to remain static and insensitive to changing resolution.

try this instead, 

.container {
  width: 800px;
    height: 400px;
    display: flex;
    flex-flow: row wrap; 
}

.item {
  flex-basis: 25%;
    background-color: orange;
    margin: 0 10px 10px 0;
    height: 50%;
}
.items {
  flex-basis: 51%;
    background-color: orange;
    margin: 0 10px 10px 0;
    height: 50%;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="items">this is text content and again and again this is text content and again and again</div>
  <div class="item"></div>
</div>

This Works fine. All the best

Neeraj Kamat
  • 354
  • 3
  • 12
-1

Any reason you have a strong attachment to flexbox? This would be super easy using the bootstrap grid. (I see you have the container class, so you likely already have bootstrap installed)

<div class="container">
  <div class="item col-md-3"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-3"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-3 col-md-offset-1"></div>
  <div class="item col-md-6">this is text content and again and again this is text content and again and again</div>
  <div class="item col-md-3 col-md-offset-1"></div>
</div>

If you're not into using bootstrap, CSS3 now has a native grid layout which should also suit your purpose.

In your situation, I think this would be the way to go. Flexbox is a great layout, but it's meant more for dynamic displays where you don't need precise control over the size/dimension of the items.

nmg49
  • 1,356
  • 1
  • 11
  • 28
  • With bootstrap grid items anyway will be fixed size. – bashkovpd Aug 27 '18 at 18:46
  • @bashkovpd No they won't - you can built very responsive designs with bootstrap grid, but it gives you a lot more layout control than flexbox. That why I recommended it. – nmg49 Aug 27 '18 at 18:58
-1

You can add a class, let's say extra.

And add assign property of max-width:max-content; to it.

.container {
  display: flex;
  width: 300px;
  height: 300px;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  flex: 1;
  min-width: calc(100px - 10px);
  max-width: calc(100px - 10px);
  height: calc(100px - 10px);
  margin: 5px;
  background: green;
}

.extra {
  max-width: max-content !important;
  max-width: -moz-fit-content !important;
  color: white;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item extra">this is extra text and expands</div>
  <div class="item"></div>
</div>
Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69