Гибкий блок - один большой div рядом с несколькими маленькими подразделениями

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня проблема с помещением <p> <nav> рядом с <div> «s», которые находятся в столбцах в гибком поле. Как я могу добиться этого без каких-либо фреймворков, таких как Bootstrap?

Вот код:

 <nav>
        <div><a href="">O mnie</a></div>
        <div><a href="">Moje projekty</a></div>
        <div><a href="">Galeria</a></div>
        <div><a href="">Kontakt</a></div>
        <p>tekst tekst</p>
    </nav>
nav
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav div
{
    padding: 30px;
    margin: 10px;
    box-shadow: 0px 5px 15px rgba(0,0,0,.5);
    text-align: center;
    width: 300px;

}
nav p
{
    margin-left: auto;
    margin-top: auto;

}

Ответ №1:

Если вы хотите, чтобы они были рядом друг с другом, вам нужно установить значение flex-direction to row и, если вы хотите, чтобы они имели одинаковую ширину, присвоить всем дочерним элементам в вашем гибком контейнере width значение of 100% .

Смотрите пример в Codepen: https://codepen.io/EinLinuus/pen/WNxvwbo

Ответ №2:

Если я правильно понимаю, вам нужны элементы навигации и

тег должен быть рядом.

если вы хотите добиться этого, вы можете обернуть ‘s в свой собственный раздел и применить flex-direction: row; к

 nav
{
    display: flex;
    flex-direction: row;
    align-items: center;
}
nav div
{
    padding: 30px;
    margin: 10px;
    box-shadow: 0px 5px 15px rgba(0,0,0,.5);
    text-align: center;
    width: 300px;

}

.main {
    display: flex;
    flex-direction: column;
}

 <nav>
    <section class="main">
        <div><a href="">O mnie</a></div>
        <div><a href="">Moje projekty</a></div>
        <div><a href="">Galeria</a></div>
        <div><a href="">Kontakt</a></div>
    </section>
        <p>tekst tekst</p>
    </nav>

Я надеюсь, что это то, что вам нужно. Если обратите внимание, можете ли вы объяснить немного больше о том, чего вы хотите достичь?

1. Спасибо за ваш ответ. Эти разделы в nav я хотел бы иметь наверняка с помощью flex-direction: column. Проблема в том, что я не могу поместить <p> рядом с первым div, потому что <p> все еще находится в столбце flex-direction:, и я никак не могу это изменить,

2. Я думаю, что код, который я вам дал, достигает того, что вы ищете. Если вы хотите, чтобы тег <p> находился рядом с первым <div> в вашем <nav>, тогда вы можете выровнять-items: flex-start; вместо центра. codepen.io/c-tregunna/pen/qBNdZEQ

3. Извините, но нет. Но я нашел ответ. Я не могу добиться этого с помощью flex box. Вы можете увидеть это в начале этого видео: youtube.com/watch?v=RSIclWvNTdQ . Я хотел иметь один большой div рядом с другим, несколько меньшим, как в css grid.