How can div with be controlled with responsiveness

Question

I have a div with width 364px. There can be one or more same divs inside the container. I want divs width to behave like following.

I want to show maximum 4 div in one row, which i am doing right now. What i want is, if there is one div its width should 100%. if two divs, it should be 50 50 %. If three divs, then width should be 33.3% for each div. If four, then 25% each.

How can i do that?

the container could look like this,

<div class="container">
    <div class="goal"></div>
</div>

or

<div class="container">
    <div class="goal"></div>
    <div class="goal"></div>
    <div class="goal"></div>
</div>

The CSS is the following but i don't know how can implement such rules

.goal {
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

Adam Jenkins · Accepted Answer · 2015-10-22T15:40:18.337

3

Flexbox

Your div's need to be all equal width so your rule is: flex: 1 0 0 which states:

flex-grow: 1; /* grow to fill the available space */
flex-shrink: 0; /* can't shrink, but because the default width is 0, it doesn't need to */
flex-basis: 0; /* default width */

and set display:flex on .container.

.goal {
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  flex: 1 0 0;
  -ms-flex: 1 0 0;
  -webkit-flex: 1 0 0;
}

.container {
  display:flex;
  display:-ms-flex;
  display:-webkit-flex;
}

<div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
</div>

<div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
</div>

<div class="container">
    <div class="goal">1</div>
</div>

edited Oct 22 '15 at 15:40

answered Oct 22 '15 at 15:32

Adam Jenkins

51,445
11
72
100

can you please explain a bit this flex value? 1 0 0 ? – Shaonline Oct 22 '15 at 15:34
It means that the `.goal` should all start out at `0` width (the third 0) and should grow as necessary (the first 1), all on the same line, no wrapping, making them all equal width. This is the best guide I've found and I refer to it often: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Adam Jenkins Oct 22 '15 at 15:35
@Shaonline please keep in mind that IE 10 or below has issues with `display: flex` http://caniuse.com/#search=flex – AGE Oct 22 '15 at 15:37
@AGE - it supports an older syntax, but it fully supports flexbox. – Adam Jenkins Oct 22 '15 at 15:38
@Adam agreed, go ahead and add the syntax to your answer... or a link for reference – AGE Oct 22 '15 at 15:39

score 1 · Answer 2 · answered Oct 22 '15 at 16:06

This can be achieved also without flexbox using display: table and display: table-cell

Html:

<div class="wrapper">
  <div class="container">
    <div class="goal">1</div>
  </div>
  <div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
  </div>
  <div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
    <div class="goal">4</div>
  </div>
</div>

Css:

.wrapper {
  width: 350px;
}
.container {
  display: table;
  width: 100%;
  text-align: center;
}
.goal {
  padding: 1em;
  border: 1px solid black;
  display: table-cell;
  background: #5A8EAE;  
  color: white;
  font-family: sans-serif;
}

Codepen

score 0 · Answer 3 · answered Oct 22 '15 at 15:42

a jquery solution if you're willing to use jquery

$(document).ready(function() {
    $('.add').on('click', function() {
        if ($('.goal').length < 4) {
            $('.container').append('<div class="goal">stuff here</div>');
            responsive();
        }
    });
    
    responsive();
 function responsive() {
     var count = $('.goal').length;
        var width = parseFloat(100.00/count).toFixed(0) - 1;
        $('.goal').each(function() {
         $(this).css('width', width + '%');
        });
    };
});

.container {
    width: 364px;
    background: lightgray;
    outline: 1px solid blue;
    padding: 15px;
}
.goal {
    outline: 1px solid black;
    height: 50px;
    background: gray;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="add" href="#">ADD DIV</a>

<div class="container">
    <div class="goal">stuff here</div>
</div>

How can div with be controlled with responsiveness

3 Answers3