Как сделать каждый элемент в flex-box равным? - PullRequest
Новая
       22

Как сделать каждый элемент в flex-box равным?

1 голос
/ 07 марта 2020

Итак, у меня есть bootstrap нумерация страниц, и поскольку могут быть более длинные числа, они имеют большую ширину, я хочу, чтобы каждый элемент был равной ширине или каждый элемент был шириной самого большого.

Это нумерация страниц 

<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>

Ответы [ 2 ]

1 голос
/ 07 марта 2020

Положите flex-basis и сделайте .page-link до ширины 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>
1 голос
/ 07 марта 2020

Это можно сделать с помощью свойства flex-grow. 

.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>
...