3

html, body {
  height: 100%;
}

.flex{
  min-height: 100%;
 display: flex;
 justify-content:center;
 flex-flow: row wrap;
 align-items: center;
  
 background: red;
}
  
.coloring {
  background:#CCC;
  border-radius:7px;
  padding: 20px;
  margin: 0px;
}

.Projects{
  order: 1;
  flex: 0 1 100%;
}

.Tribute{
  order: 2;
  flex: 1 1;
}

.Portfolio{
  order: 3;
  flex: 1 1;
}
<section class="flex">

   <div class="coloring Projects">Projects</div>
   <div class="coloring Tribute">Tribute</div>
   <div class="coloring Portfolio">Portfolio</div>

</section>

When you narrow the screen there is going to be 3 rows and now there are 2 such huge unwanted margins. I don’t know what to do. If I eliminate align-items: center the boxes will fill the entire page, but that is not what I want.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
most venerable sir
  • 649
  • 8
  • 21
  • Please describe (in English, or with a mockup) the appearance you _do_ want. I can think of several different changes that would eliminate the gaps between the flex items, but they all have different side-effects. – zwol Jan 09 '17 at 17:44

2 Answers2

3

Aligning between multiple flex lines is handled by the align-content property - try align-content: center to eliminate the margins - see demo below:

html,
body {
  height: 100%;
}
.flex {
  min-height: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  background: red;
}
.coloring {
  background: #CCC;
  border-radius: 7px;
  padding: 20px;
  margin: 0px;
}
.Projects {
  order: 1;
  flex: 0 1 100%;
}
.Tribute {
  order: 2;
  flex: 1 1;
}
.Portfolio {
  order: 3;
  flex: 1 1;
}
<section class="flex">
  <div class="coloring Projects">Projects</div>
  <div class="coloring Tribute">Tribute</div>
  <div class="coloring Portfolio">Portfolio</div>
</section>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
0

only you have to remove

min-height from .flex class

Ajay
  • 196
  • 2
  • 12