Hector Harris-Burton
Hector Harris-Burton

Reputation: 101

Flexbox two children side by side and a third on a separate row

Was hoping someone would be able to show me how to make "grid-item" 1 and 2 be next to each other taking up 50% each and then "grid-item" 3 to be on the line below with a width of 100%:

.grid-items {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.grid-items > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.grid-item {
  flex: 1 50%;
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}
<!DOCTYPE html>
<html>
<body>
<h1>Flexible Boxes</h1>

<div class="grid-items">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item" class="grid-item-wide">3</div>  
</div>

</body>
</html>

Upvotes: 3

Views: 1143

Answers (2)

d-h-e
d-h-e

Reputation: 2548

50% minus your margin is the width you need

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.grid-items {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.grid-items>div {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.grid-item {
  flex: 1 1 calc(50% - 20px);
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}
<!DOCTYPE html>
<html>

<body>
  <h1>Flexible Boxes</h1>

  <div class="grid-items">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item" class="grid-item-wide">3</div>
  </div>

</body>

</html>

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

Adjust for the 10x margin in the flex: 1 50% - use flex: 1 calc(50% - 20px) - see demo below:

.grid-items {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.grid-items > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.grid-item {
  flex: 1 calc(50% - 20px); /* changed */
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}
<!DOCTYPE html>
<html>
<body>
<h1>Flexible Boxes</h1>

<div class="grid-items">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item grid-item-wide">3</div>  <!-- note the change here too -->
</div>

</body>
</html>

Upvotes: 3

Related Questions