CODEWITHSUNDEEP
htmlcssflexbox
Mister Verleg
Mister Verleg

Reputation: 4303

Flexbox with full-width header and evenly spaced child items

I am trying to make the following grid using flexbox:

[        div        ]
[ div ][ div ][ div ]

I cannot seem to get it. I have come this far:

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.flex-center {
  width 100%;
}
<div class="flex-container">
  <div class="flexcenter">flex item 1</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

Could you show me an example of how to get the grid I want?

Upvotes: 3

Views: 1692

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

.flex-container {
  display: flex;
  justify-content: space-around; /* or `space-between` */
  flex-wrap: wrap;
  width: 400px;
  height: 250px;
}

.flex-item {
  flex: 0 0 25%; /* flex-grow, flex-shrink, flex-basis */
  height: 100px;
}

.flex-item:first-child {
  flex: 0 0 100%;  /* occupies full row; with `wrap` on the container, 
                      subsequent items are forced to the next line */
}

/* non-essential decorative styles */
.flex-container {
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

Upvotes: 5

Related Questions