0

I'm trying to do an webpage using flexbox, and i'm not able to solve the problem, so i hope some one help me. I need screen divided in 4 equal parts. For each part i need to put squares inside and they should work like the image depending on the number of squares i want. I don't want to have scroll bars, it will be a full screen page without mouse or keyboard. i already have this

#box-wrapper-inner {
 display: -webkit-box;
 display: -moz-box;
 display: box;
 height:600px;
 border-style: solid;
    border-width: 3px;

 -webkit-box-orient: horizontal;
 -moz-box-orient: horizontal;
 box-orient: horizontal;

 -webkit-box-pack: start;
 -moz-box-pack: start;
 box-pack: start;

 -webkit-box-direction: normal;
 -moz-box-direction: normal;
 box-direction: normal;

 -webkit-box-align: stretch;
 -moz-box-align: stretch;
 box-align: stretch;
}

#box1 {
 -webkit-box-ordinal-group: 1;
 -moz-box-ordinal-group: 1;
 box-ordinal-group: 1;

 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1;
 border-style: solid;
    border-width: 1px;
}

#box2 {
 -webkit-box-ordinal-group: 1;
 -moz-box-ordinal-group: 1;
 box-ordinal-group: 1;

 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1;
}

#box3 {
 -webkit-box-ordinal-group: 1;
 -moz-box-ordinal-group: 1;
 box-ordinal-group: 1;

 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1;
}
#box4 {
 -webkit-box-ordinal-group: 1;
 -moz-box-ordinal-group: 1;
 box-ordinal-group: 1;

 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1;
}

#redwrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }
#red {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
 border-style: solid;
    border-width: 1px;
    }
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>FLEX</title>
 <style>
 
 </style>
</head>
<body>
<div id="box-wrapper-inner">
<div id="box1">
 <div id="redwrapper">
  <div id="red">red</div>
  <div id="red">red</div>
  <div id="red">red</div>
  <div id="red">red</div>
  <div id="red">red</div>
  <div id="red">red</div>
 
 </div>

</div>
<div id="box2">item2</div>
<div id="box3">item3</div>
<div id="box4">item4</div>
</div>

</body>
</html>

flexbox problem

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
HIT_Braga
  • 1
  • 1
  • 2
  • Code and image are very different. Please explain more. – Dhaval Jardosh Feb 07 '18 at 19:12
  • https://codepen.io/dhavaljardosh/pen/BYQwWd, something like this? – Dhaval Jardosh Feb 07 '18 at 19:17
  • Since it appears you gonna use `flex-direction: column` with `flex-wrap: wrap`, be aware of this Flexbox deficiency: https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width – Asons Feb 07 '18 at 19:23
  • Dhaval Jardosh I know the code is not the image it self. You codepen is almost like I want but should not increase to bottom (2 column) it should wrap like my example. – HIT_Braga Feb 07 '18 at 19:48

0 Answers0