Блог

Главная - Вопросы по программированию - Flexbox, ширина заливки при обертывании без использования медиа-запросов

Flexbox, ширина заливки при обертывании без использования медиа-запросов

#html #css #flexbox

Вопрос:

Итак, у меня есть гибкий родитель с гибкими элементами. Я хочу, чтобы у меня было такое поведение:

  • Пространство в режиме строки поровну делится между дочерними элементами flex.
  • Каждый ребенок имеет минимальную ширину, скажем, 100 пикселей.
  • Если ширина меньше 100 пикселей, оберните flexbox.
  • При заворачивании дети используют максимальную ширину.
  • Было бы здорово, если бы мне не нужны медиа-запросы, с ними это относительно легко сделать.

Возможно ли это?

Мой код таков:

 .connections>ul {
    height: 100%;
    width: 100%;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.connections>ul>li {
    height: 50px;
    flex-grow: 1;
}

.connection-button {
    min-width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    position: relative;
}

.discord-button {
    background-color: #5865F2;
}

.spotify-button {
    background-color: #1DB954;
}

.xbox-button {
    background-color: #107C10;
}

.steam-button {
    background-color: #1b2838;
}

.github-button {
    background-color: #14232c;
}

.gmail-button {
    background-color: #EA4335;
}

.discord-connection-button:hover {
    background-color: rgba(88, 101, 242, 0.6);
}

.spotify-connection-button:hover {
    background-color: rgba(30, 215, 96, 0.6);
}

.steam-connection-button:hover {
    background-color: rgba(68, 96, 130, 0.6);
}

.github-connection-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.email-connection-button:hover {
    background-color: rgba(212, 70, 56, 0.6);
} 
   <div class="connections">
    <ul>
      <li><a href="#discord" class="connection-button discord-button">Discord</a></li>
      <li><a href="#spotify" target="_blank" class="connection-button spotify-button">Spotify</a></li>
      <li><a href="#xbox" target="_blank" class="connection-button xbox-button">Xbox</a></li>
      <li><a href="#steam" target="_blank" class="connection-button steam-button">Steam</a></li>
      <li><a href="#github" target="_blank" class="connection-button github-button">Github</a></li>
      <li><a href="#email" class="connection-button gmail-button">Email</a></li>
    </ul>
  </div>

Обычно есть изображения абсолютного положения с векторами внутри a тегов.

Ответ №1:

Я не знаю, как это возможно с помощью только CSS, без медиа-запросов. В качестве альтернативы вы можете использовать JS для добавления или удаления классов, но это не похоже на то, что вы хотите. Кроме того, медиа-запросы в любом случае будут легче, чем JS, так что, вероятно, это правильный путь.

Кроме того, я не уверен, для чего предназначен проект, но если над ним будут работать другие разработчики, они, скорее всего, будут искать медиа-запросы, поэтому соблюдение соглашения в любом случае может быть полезным.

Метки: ,