CSS Flexbox: how to change the width of the element


Tags: css,flexbox

Problem :

I'm using Flexbox in CSS. In the next link, you can see three squares lying one above the other: http://codepen.io/CrazySynthax/pen/PbLjMO The first square is the smallest and the last square is the biggest. My question is how to draw these squares that their height will be identical, but their width will differ, so they will look like this:

---
------
---------

This is the code:

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


html, body { 
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  displax: flex;
}
.container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow:column wrap;
  justify-content:space-around;

}
.square {
  flex:1 1 auto;
  background-color:gray;
  border:solid;
  margin: 1em;
}

.square:nth-child(1) { 
  flex-grow: 1
}

.square:nth-child(2) { 
  flex-grow: 2
}

.square:nth-child(3) { 
  flex-grow: 5
}


Solution :

Add a class to each div with desired width & leave flex-grows in 1 to maintain same height:

html, body { 
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  displax: flex;
}
.container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow:column wrap;
  justify-content:space-around;
  
}
.square {
  flex:1 1 auto;
  background-color:gray;
  border:solid;
  margin: 1em;
  width: 200px
}
.square:nth-child(1) { 
  flex-grow: 1;
}
.square:nth-child(2) { 
  flex-grow: 1;
}
.square:nth-child(3) { 
  flex-grow: 1;
}
/*added classes*/
.one {
  width: 150px;
}
.two {
  width: 250px;
}
.three {
  width: 350px;
}

@media (max-width: 350px) {
   .one {
      width: auto;
   }
   .two {
      width: auto;
   }
   .three {
      width: auto;
   }
}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
</div>

EDIT: For responsive beyond 350px or whatever add a @media query (make sure it's set at the end of the CSS sheet or later than the custom width .one .two & .three):

Test resizing window on external JSFiddle

@media (max-width: 350px) {
   .one {
      width: auto;
   }
   .two {
      width: auto;
   }
   .three {
      width: auto;
   }
}

    CSS Howto..

    How can I add CSS animation to an element on a web page? [closed]

    How to make emails responsive?

    How to do img validation

    How can I fix this Bootstrap layout issue?

    How to style an embedded jsp inside another jsp?

    CSS / HTML: How to force horizontal scrollbar when table does not fit on screen?

    how do I modify a :hover style using JavaScript / jQuery?

    How to wrap div containing spans containing the text to be wrapped?

    CSS + Show Animated GIF while Loads

    How to prevent randomly positioned images from overlapping using Angular

    How to create a multi colored circle in html and css

    How to change css display none or block with button click

    how to make css tooltip not push elements outline in FF

    How to make a new DOM element to think it resides in a different domain with js and css

    How to animate CSS resize?

    how to download google fonts in version bold

    How to create a backdrop for a dialog?

    How to place differently sized images in 2 columns with figcaption aligned

    How to edit CSS style of a div using C# in .NET

    How to not display common border between two adjacent divs?

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    jquery - how to queue up a series of css property changes

    How to apply Title Case in input box through css

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to Dynamically create a CSS class using AngularJS

    How to make the text that are typed inside the input to appear into a seperate div

    How to refere a stylesheet in phonegap?

    CSS Media Queries: How to make the right column display above the left on small screens?

    How to get jQuery UI tabs element panels and set visibility on some of them?