Nano Hash - криптовалюты, майнинг, программирование

Равная ширина с использованием flex и border-box

Я использую box-sizing: border-box; с различной толщиной border в flexbox. Я хочу, чтобы элементы внутри flexbox имели одинаковую ширину, но он вычисляет width элемента без границ.

Вот пример: width моего контейнера равно 100px, поэтому каждый элемент должен быть 20px; однако они 19.2px (x4) и 23.2px.

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}
<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

html css flexbox
05.05.2017

Ответы:


1

box-sizing: border-box используется для изменения блочной модели CSS по умолчанию, используемой для расчета width и height элементов.

Так было бы так:

  • total width = border + padding + content width

    а также

  • total height = border + padding + content height

Но это происходит не в flex-grow, а в flex-basis

Вот хороший руководство про флексбокс

Таким образом, вы можете использовать flex:0 20% вместо flex:1,

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 20%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}
<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

Примечание. если у вас больше элементов, чем 5, вы можете использовать calc(), например flex: 0 calc(100%/8), где 8 – количество элементов, которое у вас будет.

Фрагмент с дополнительными элементами

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 calc(100%/8);
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}
<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
  <span class="block">5</span>
  <span class="block">6</span>
  <span class="block">7</span>
</div>

05.05.2017
  • хорошо, мне больше всего нравится этот ответ, хотя все они делают то же самое. 05.05.2017

    • 2

    flex-grow свойство не устанавливает ширину или высоту flex-элементов. Его работа заключается в распределении свободного места в контейнере между гибкими элементами.

    Для всех элементов установлено значение flex: 1< /a>, что является сокращением для:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: 0

    Это распределяет свободное пространство в строке поровну между элементами.

    НО границы (и отступы) учитываются отдельно.

    flex-grow не волнует box-sizing: border-box, потому что box-sizing применяется к вычислениям width и height, которые, как упоминалось ранее, не являются функциями flex-grow.

    Вместо этого используйте flex-basis< /a>, которое эквивалентно width (в контейнере направления строки) и будет учитывать box-sizing:

    flex: 0 0 20%;


    .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 0 20%; /* adjustment */
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}
    <div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

    05.05.2017

    3

    Вместо того, чтобы устанавливать flex равным единице, вы можете установить flex-basis на 20%, и тогда ширина будет разделена поровну:

    .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex-basis: 20%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}
    <div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

    05.05.2017

    4

    Одним из способов может быть установка отступа 2px для .block и удаление его для .selected.

    .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 2px;
}

.container .block.selected {
  border: 3px solid blue;
  padding: 0px;
}
    <div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

    05.05.2017

    5

    ваша проблема здесь flex: 1; измените его на flex: 1 0 20%; даже для большего/меньшего количества элементов. нет необходимости вычислять ширину, используя calc, как уже упоминалось.

    также просто измените это:

    .container .block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing:         border-box;
}

    to:

    .container .block {
  height: 28px;
  flex: 1 0 20%;
  border: 1px solid black;
    -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

    ДЕМО: https://jsfiddle.net/4aww81wv/

    05.05.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..