CODEWITHSUNDEEP
htmlcss
Thusitha Wickramasinghe
Thusitha Wickramasinghe

Reputation: 1103

How to arrange three flex div side by side

divs

I have three divs in content div, When browser resizing

I also tried this in css

.yellow{
    height: 100%;
    width: 100%;
}
.red{
    height: 100%;
    width:200px;
    display:inline-block;
    background-color: red;
}
.green{
    height: 100%;
    min-width:400px;
    display:inline-block;
    background-color:green;
}
.blue{
    height: 100%;
    width:400px;
    display:inline-block;
    background-color: blue;
}

This code does not resize green div, In some browsers red panel not showing

I also tried float: left and

    display: -webkit-flex;
    display: flex;

but not working correctly. How to do this?

Upvotes: 18

Views: 53027

Answers (2)

maja
maja

Reputation: 18044

Use flex-grow. Set it to 0 for the blue and red container, and something big for the green one:

.red{
    height: 100%;
    width:200px;
    flex-grow: 0;
    display:inline-block;
    background-color: red;
}
.green{
    height: 100%;
    min-width:400px;
    flex-grow: 1000;
    display:inline-block;
    background-color:green;
}
.blue{
    height: 100%;
    width:400px;
    flex-grow: 0;
    display:inline-block;
    background-color: blue;
}

A very good cheat sheet can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also, don't forget the other properties like display: flex;and justify-content: space-between. It's perfectly explained in the above link.

Note, however, that you don't have to use flexbox. you can achieve the same with float, which makes it compatible with older browsers (To do so, just use display: block; and add float: left to the blue div and float: right; to the red one.)

Upvotes: 15

Oriol
Oriol

Reputation: 288100

You can use the flex shorthand property, which defines the flexible behavior of an item:

.yellow { display: flex } /* Magic begins */
.red, .green, .blue { min-width: 0 } /* See http://stackoverflow.com/q/26895349/ */
.red { flex: 0 200px } /* Initial width of 200, won't grow, can shrink if necessary */
.green { flex: 400px } /* Initial width of 400, grows to fill available space, can shrink if necessary */
.blue { flex: 0 400px } /* Initial width of 400, won't grow, can shrink if necessary */


html, body {
  height: 100%;
  margin: 0;
}
.yellow {
  display: flex;
  height: 100%;
}
.red, .green, .blue {
  min-width: 0;
}
.red {
  flex: 0 200px;
  background-color: red;
}
.green {
  flex: 400px;
  background-color:green;
}
.blue {
  flex: 0 400px;
  background-color: blue;
}
<div class="yellow">
  <div class="blue"></div>
  <div class="green"></div>
  <div class="red"></div>
</div>

Upvotes: 11

Related Questions