Why the items are not occupying the full width?

user_15953345 0
Viewed 42

I want to have 6 flex items with the same width and occupying the full width with little margins between the items but its not working properly, there is a lot of margin specially in larger screens. Do you know how to occupy the full available width? Thanks!

Example:

https://jsfiddle.net/dskox7jc/

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  border: 1px solid orange;
  border-radius: 5px;
  padding: 10px;
  margin-right: 20px;
  min-width: 150px;
  margin-bottom: 30px;
}

.item-count {
  font-size: 150%;
  font-weight: bold;
}

.item-status {
  font-size: 125%;
  font-weight: bold;
}
<div>
  <div>
    <span class="flex">
      <span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
<span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status less text</span></div>
</div>
</a>
</span>
<span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status more text in this status</span></div>
</div>
</a>
</span>
<span>
        <a href="#">
          <div class="item">
            <div class="item-count" align="center">
              <div class="item-count">0</div>
            </div>
            <div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
</span>
</div>
</div>

flexbox css html
2 Answers

Hi John and welcome to stackoverflow!

Since you have an <a> tag as the first child of the flex container, you need to apply the styles to it. Add

.flex > a {
  flex: 1;
}

to remove the padding between the boxes.

user_20447060

Try using Bootstrap's Layout & Flex: https://getbootstrap.com/docs/4.3/utilities/flex/

It will look something like this, with a few changes if you need:

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
  <div class="row d-flex justify-content-center align-items-center m-2">
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status less text</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status with more text</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>
  <a href="#" class="col-4">
    <div class="item">
      <div class="myCounter-count" align="center">
        <div class="item-count">0</div>
      </div>
      <div class="item-status" align="center"><span>Status 1</span>
      </div>
    </div>
  </a>

</div>
</div>

.item {
  border: 1px solid orange;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
}

.item-count {
  font-size: 150%;
  font-weight: bold;    
}

.item-status {
  font-size: 125%;
  font-weight: bold;
}

.col-4 {
  margin-bottom: 20px;
}

https://jsfiddle.net/2a6mngxc/15/

user_133462280
Related