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

Элементы сетки (кнопки по умолчанию) увеличивают контейнер сетки?

У меня есть flex-контейнер с 2 flex-элементами.

<div className="flexContainer">
  <div className="FlexItem1"></div>
  <div className="FlexItem2"></div>
</div>

Оба гибких элемента имеют:

flex-grow: 1;

введите здесь описание изображения

гибкий элемент 2:

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);

Теперь я добавляю элементы сетки в контейнер сетки (элементы сетки = кнопки по умолчанию).

Проблема: эти элементы сетки увеличивают ширину контейнера сетки.

введите здесь описание изображения

Вопросы: Почему элементы сетки по умолчанию увеличивают ширину своего контейнера здесь? Каков наилучший способ обеспечить, чтобы гибкие элементы оставались шириной 50-50, независимо от того, что происходит внутри гибких элементов?

css flexbox css-grid
06.05.2020

  • используйте полную настройку: flex:1 0 50%; (+ сброс размера окна) или сокращенно: flex:1 ; flex-grow сам по себе недостаточно, он все еще может уменьшаться ;) Демонстрация: codepen.io/gc-nomade/pen/MWaQKpE 06.05.2020
  • Это работает! Я собираюсь углубиться в эту полную настройку, спасибо. 06.05.2020

Ответы:


1

Используйте flex-basis для ваших внутренних контейнеров и установите ширину/высоту кнопок 50px/50px

.flexContainer {
  display: flex;
}
.FlexItem1,.FlexItem2 {
  flex-basis: 150px;
  border: 2px solid #000;
  box-sizing: border-box;
}
.FlexItem2 {
  border-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.FlexItem2 button {
  width: 50px;
  height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="flexContainer">
  <div class="FlexItem1"></div>
  <div class="FlexItem2">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    </div>
</div>
</body>
</html>

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