Как центрировать один из трех элементов в следующей строке в CSS?

Я новичок в CSS, и теперь я пытаюсь понять, как это работает. Я начал с курса CS50, и я пытаюсь сделать Project 0 этого курса, который включает в себя воспроизведение внешнего интерфейса Google Search. Раньше я доделывал этот проект до конца, но сейчас решил повторить и взять за основу flex-боксы. Я написал короткий код, который хочу позже подключить к поиску Google. К элементам панели поиска, кнопки 1 и кнопки 2 относятся: панель поиска, кнопка поиска Google и кнопка «Мне повезет». Я сейчас попытался центрировать эти элементы и кнопки, чтобы переместить строку ниже, но я не очень понимаю, как это сделать. Пробовал flex-wrap:wrap и flex-basis, но это приводит к тому, что элементы меняют строку, но расстояние между ними составляет половину страницы, и изменение высоты тоже ничего не дает. Кто-нибудь знает, как заставить это работать, оставаясь в flexbox?

.searcher {
  display: flex;
  background-color: gray;
  color: white;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
}

.searchbar {
  margin: 1%;
}

.buttons {
  margin: 1%;
}
<div class="searcher">
  <div class="searchbar">
    <p>searchbar</p>
  </div>
  <div class="buttons">
    <p>button1</p>
  </div>
  <div class="buttons">
    <p>button2</p>
  </div>
</div>

Гибкость CSS может быть сложной. Это постоянное добавление в мои закладки для разработчиков: Полное руководство по Flexbox

fnostro 22.04.2022 19:20

@fnostro Я это читал, но хоть и глупо признаваться, все равно не понимаю, что делать в такой ситуации :/

fasfrtewqt2354r2edrq 22.04.2022 19:31

@ fasfrtewqt2354r2edrq, насколько я понимаю, вы хотите, чтобы две кнопки были под строкой поиска в удобном расположении, как Google?

Dylan Barquilla 22.04.2022 19:36

@dylan-barquilla Точно! :)

fasfrtewqt2354r2edrq 22.04.2022 19:39
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
4
55
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Кажется, вам нужен еще один слой гибкого макета вдоль вертикальной оси, где будут размещаться строки вашего макета. Вторая строка, содержащая кнопки, будет располагаться как флексбокс вдоль горизонтальной оси.

Основываясь на вашей разметке (выравнивание кнопок по правому краю для демонстрационных целей):

<html>
    <head>
        <style>
        .searcher {
            display:            flex;
            flex-direction:     column;
            background-color:   gray;
            color:              white;
            justify-content:    center;
            align-items:        stretch;
            flex-wrap:          wrap;
            height:             100%;
        }
        .searchbar {
            margin: 1%;
            text-align: center;
        }
        .nav {
            display:            flex;
            flex-direction:     row;
            flex-wrap:          nowrap;
            justify-content:    right;
           
        }
        .buttons {
            margin: 1%;
        }
        </style>
    </head>
    <body>
        <div class="searcher">
            <div class="searchbar">
                <p>searchbar</p>
            </div>
            <div class="nav">
                <div class="buttons">
                    <p>button1</p>
                </div>
                <div class="buttons">
                    <p>button2</p>
                </div>
            </div>
        </div>
    </body>
</html>
Ответ принят как подходящий

Если немного изменить код HTML, у меня есть решение.

Помещение обеих кнопок в div и использование их как одного элемента значительно упрощает работу и позволяет реорганизовать их внутри по своему усмотрению.

.searcher {
  display: flex;
  background-color: gray;
  color: white;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  flex-direction: column;
}

.searchbar {
  margin: 1%;
}

.buttons {
    display: flex;
    flex-direction: row;
}

.button {
  margin: 1%;
}
<div class="searcher">
  <div class="searchbar">
    <p>searchbar</p>
  </div>
  <div class="buttons">
    <div class="button">
        <p>button1</p>
    </div>
    <div class="button">
        <p>button2</p>
    </div>
  </div>
</div>

Другие вопросы по теме