Crkva Kovacica Crkva Kovacica - 4 months ago 11
CSS Question

My flex is displaying six divs in row instead of three?

The problem is that i want three divs in a row instead of six, i set the

width
of whole section to 80% and the
width
of each section to 26,66667% which is 80/3 but my
display: flex
is not working properly

Here is my code:



body,
html {
background: #FFFFFF;
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
#section_wrapper {
width: 80%;
margin: 0 auto;
position: relative;
font-size: 0;
display: flex;
}
.section {
margin: 0;
padding: 0;
position: relative;
width: 26.666667%;
height: 200px;
font-size: 20px;
}
.section1 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section2 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section3 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section4 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section5 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section6 {
background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
background-position: center;
}
.section1 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
.section3 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}
.section5 h3 {
font-family: "Roboto";
color: white;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
}

<div id="section_wrapper">
<div class="section section1">
<h3>About me</h3>
</div>

<div class="section section3">

</div>

<div class="section section3">
<h3>Work</h3>
</div>

<div class="section section4">

</div>

<div class="section section5">
<h3>Services</h3>
</div>

<div class="section section6">

</div>
</div>





By the way this is the design i'm trying to code:
enter image description here

Answer

You are missing flex-wrap:wrap so it will wrap when there is not more space for the children to expand

And you can use flex-basis: calc(100%/3) instead of that weird width

See a good article about flexbox here

body,
html {
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}
#section_wrapper {
  width: 80%;
  margin: 0 auto;
  position: relative;
  font-size: 0;
  display: flex;
  flex-wrap: wrap
}
.section {
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1 calc(100%/3);
  height: 200px;
  font-size: 20px;
}
.section1 {
  background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
  background-position: center;
}
.section2 {
  background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
  background-position: center;
}
.section3 {
  background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
  background-position: center;
}
.section4 {
  background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
  background-position: center;
}
.section5 {
  background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
  background-position: center;
}
.section6 {
  background: url(http://dreamatico.com/data_images/mountain/mountain-1.jpg);
  background-position: center;
}
.section1 h3 {
  font-family: "Roboto";
  color: white;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}
.section3 h3 {
  font-family: "Roboto";
  color: white;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}
.section5 h3 {
  font-family: "Roboto";
  color: white;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}
<div id="section_wrapper">
  <div class="section section1">
    <h3>About me</h3>
  </div>

  <div class="section section3">

  </div>

  <div class="section section3">
    <h3>Work</h3>
  </div>

  <div class="section section4">

  </div>

  <div class="section section5">
    <h3>Services</h3>
  </div>

  <div class="section section6">

  </div>
</div>

Comments