Dec Fathani Ответов: 1

Flex или flex-grow, flex-grow или flex

Я использую гибкий трубопровод для регулировки ширины этих элементов: main, .aside1, .aside2 Страница приходит, как я и ожидал.

Как я знаю, что Flex-это сокращение для Flex-расти, флекс-сокращаться, и с гибким основанием.

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

Это моя кодовая ручка для кода flex или flex-grow[^]

Вот как это выглядит, когда flex меняется на flex-grow https://i.ibb.co/PZsHSM7/flex-or-flex-grow.png[^]

Это мой html код:
<blockquote class="quote"><div class="op">Quote:</div><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Lagi</title>
    <link rel="stylesheet" a href="style.css">
</head>
<body>
    <div class="container">   
        <section>
            <main>                
                <h1>Main</h1>
            </main>

            <aside class="aside1">
                <h1>Aside1</h1>
            </aside>

            <aside class="aside2">
                <h1>Aside2</h1>
            </aside>

            <footer>
                <h1>Footer</h1>
            </footer>

        </section>

    </div><!--endContainer-->
</body>
</html></blockquote>

Это мой css:
<blockquote class="quote"><div class="op">Quote:</div>.container
{
    margin: 0 auto;
    background-color: lightblue;
    width: 800px;
}

section
{
    display: flex;
    flex-wrap: wrap;   
}

section > *
{
  flex-basis: 100%;
}

main
{
    flex: 2;
    order: 2;
    background-color: tomato;
    text-align: center;
    
}

.aside1
{
    flex: 1;
    order: 1;
    background-color: green;
    text-align: center;
}

.aside2
{
    flex: 1;
    order: 3;
    background-color: mediumorchid;
    text-align: center;
}

footer
{
    order: 4;
    background-color: teal;
    text-align: center;
}


Что я уже пробовал:

Я все еще изучаю Flexbox. так что я не знаю, как это сделать.
Нужна помощь.

1 Ответов

Рейтинг:
8

Richard Deeming

Посмотрите на документацию MDN:

flex - CSS: Каскадные Таблицы Стилей | MDN[^]:
Синтаксис с одним значением: значение должно быть одним из следующих:
  • один <number>: В данном случае это интерпретируется как flex: <number> 1 0; то <flex-shrink> предполагается, что значение равно 1 и <flex-basis> предполагается, что значение равно 0.
Так:
flex: 2;
эквивалентно: 
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
Если вы измените его на: 
flex-grow: 2;
вы теряете его flex-shrink и flex-basis ценности. flex-shrink по умолчанию используется значение 1, но вы установили значение по умолчанию flex-basis к 100%:
section > *
{
  flex-basis: 100%;
}
Это означает, что элементы будут растягиваться, чтобы заполнить всю ширину контейнера, поэтому вы получаете "сложенный" макет.

Если вы добавите flex-basis: auto; к каждому элементу, который вы меняете на flex-grow, вы будете держать тот же макет:
flex или flex-grow[^]

Dec Fathani

Большое спасибо..