CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
Bohdan Kordon
Bohdan Kordon

Reputation: 15

How to make every element in flex-box equal?

So i have a bootstrap pagination and because there can be longer numbers they have bigger width, i want each element to be equal width or every element to be the width of the the biggest one.

This pagination

<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item">
            <button class="page-link text-dark"><i class="fas fa-arrow-left"></i></button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">1</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">2</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">3</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">11</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">13</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark"><i class="fas fa-arrow-right"></i></button>
        </li>
    </ul>
</nav>

Upvotes: 1

Views: 95

Answers (2)

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4434

Put a flex-basis and make .page-link to width 100%

.page-item{
   flex: 0 1 40px;
}

.page-link{
 width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item">
            <button class="page-link text-dark"><i class="fas fa-arrow-left"></i></button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">1</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">2</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">3</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">11</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark">13</button>
        </li>
        <li class="page-item">
            <button class="page-link text-dark"><i class="fas fa-arrow-right"></i></button>
        </li>
    </ul>
</nav>

Upvotes: 1

sanriot
sanriot

Reputation: 804

You can that by using flex-grow property.

.page-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <button class="page-link text-dark"><i class="fas fa-arrow-left"></i></button>
    </li>
    <li class="page-item">
      <button class="page-link text-dark">1</button>
    </li>
    <li class="page-item">
      <button class="page-link text-dark">2</button>
    </li>
    <li class="page-item">
      <button class="page-link text-dark">3</button>
    </li>
    <li class="page-item">
      <button class="page-link text-dark">11</button>
    </li>
    <li class="page-item">
      <button class="page-link text-dark">13</button>
    </li>
    <li class="page-item">
      <button class="page-link text-dark"><i class="fas fa-arrow-right"></i></button>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions