Объяснение записи flex: 1 1 100%

Question

Что в комплексе означает запись flex: 1 1 100%?

/* Обнуление */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
ul,
ol,
li {
    list-style: none;
}
img {
    vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}
html,
body {
    height: 100%;
    line-height: 1;
    background: #fafafa;
    font-size: 14px;
    color: #252b42;
    font-weight: 500;
    font-family: Montserrat;
}


.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._container {
    max-width: 1046px;
    padding: 0px 15px;
    margin: 0px auto;
    box-sizing: content-box;
}

._ibg {
    position: relative;
}

._ibg img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* ------------------------------------------------------------------------- */

.header {
    position:absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 50;
}

.header__container {
    display: flex;
    min-height: 104px;
    align-items: center;
}

@media (max-width: 479px) {
    .header__container {
        min-height: 70px;
    }
}

.header__logo {
    font-size: 24px;
    font-weight: 700;
    color: inherit;
}

.header__menu {
    margin: 0px 0px 0px 133px;
}

.menu{
    padding: 5px 0px;
}

.menu__list {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 992px){
    .header__menu {
        margin: 0px 0px 0px 80px;
    }
}

@media (max-width: 767px) {
    .header__menu {
        margin: 0px 0px 0px 40px;
    }
}

@media (max-width: 479px) {
    .header__menu {
        margin: 0px 0px 0px 20px;
    }
}

.menu__item:not(:last-child) {
    margin: 0px 21px 0px 0px;
}

.menu__link {
    color: #737373;
    font-weight: 600;
    line-height: calc(24 / 14*100%);
}

@media (max-width: 479px) {
    .menu__link {
        font-size: 18px;
    }
}

/* -------------page----------------------------------------------------------------------- */

.page {
    flex: 1 1 auto;
}

/* -------------footer---------------------------------------------------------------------- */

.footer {

}

/* --------------main-block---------------------------------------------------------------------- */

.main-block {
    position: relative;
}

.main-block__container {

}

.main-block__body {
    padding: 184px 0px 191px 0px;
    position: relative;
    z-index: 2;
    max-width: 400px;
}

@media (max-width: 992px) {
    .main-block__body{
        padding: 120px 0 191px 0px;
    }
}

.main-block__body > *:not(:last-child) {
    margin: 0px 0px 35px 0px;
}

.main-block__title {
    font-size: 58px;
    line-height: calc(80 / 58 * 100%);
    letter-spacing: 0.2px;
    font-weight: 800;
}

@media (max-width: 479px) {
    .main-block__title {
        font-size: 42px;
    }
}
.main-block__text {
    color: #737373;
    font-size: 20px;
    line-height: 150%;
}

.main-block__buttons {
    display: flex;
    flex-wrap: wrap;
    margin: -10px 0px;
}

.main-block__button {
    border-radius: 37px;
    display: flex;
    min-height: 48px;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.2px;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
    padding: 0px 36px;
    margin: 10px 0px;
}

@media (max-width: 479px){
    .main-block__button{
        flex: 1 1 100%;
    }
}

@media (min-width: 479px) {
    .main-block__button:not(:last-child){
        margin-right: 10px;
    }
}

.main-block__button_orange{
    background: #ff7b47;
    color: #fff;    
}

.main-block__button_border {
    color: #0d5c63;
    border: 1px solid #0d5c63;
}

.main-block__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;    
}

@media (max-width: 1300px) {
    .main-block__image img {
        object-position: right;
    }
}

@media (max-width: 992px) {
    .main-block__image {
        opacity: 0.5;
    }
}

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css">
    <title>Relvise</title>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="header__container _container">
                <a href="" class="header__logo">
                    Relvise
                </a>
                <nav class="header__menu menu">
                    <ul class="menu__list">
                        <li class="menu__item">
                            <a href="" class="menu__link">
                                Home
                            </a>
                        </li>
                        <li class="menu__item">
                            <a href="" class="menu__link">
                                Product
                            </a>
                        </li>
                        <li class="menu__item">
                            <a href="" class="menu__link">
                                Pricing
                            </a>
                        </li>                                                
                        <li class="menu__item">
                            <a href="" class="menu__link">
                                Contact
                            </a>
                        </li>                        
                    </ul>
                </nav>
            </div>
        </header>
        <main class="page">
            <div class="page__main-block main-block">
                <div class="main-block__container _container">
                    <div class="main-block__body">
                        <h1 class="main-block__title">Finance and Consultancy Solution</h1>
                        <div class="main-block__text">
                            We know how large objects will act, but things on a small scale.
                        </div>
                        <div class="main-block__buttons">
                            <a href="" class="main-block__button main-block__button_orange">Get Quote Now</a>
                            <a href="" class="main-block__button main-block__button_border">Learn More</a>
                        </div>
                    </div>    
                </div>
                <div class="main-block__image _ibg">
                    <img src="img/mainblock/cover.jpg" alt="cover">
                </div>
            </div>
        </main>
        <footer class="footer">

        </footer>
    </div>
    <script src="js/script.js"></script>    
</body>
</html>

Что значит запись flex: 1 1 100% в следующем участке css кода

@media (max-width: 479px){
    .main-block__button{
        flex: 1 1 100%;
    }
}

@media (min-width: 479px) {
    .main-block__button:not(:last-child){
        margin-right: 10px;
    }
}

Нужна детальная расшифровка, поскольку я новичок. На видеуроке по адаптивной верстке на 1:45:00-1:47:30 показано, что при вышеприведенной верстке при уменьшении экрана кнопки Get Quote Now и Learn More становятся в один столбик и становятся равными по ширине. Почему вышеприведенная запись означает это?

Answer 1

flex: 1 1 100%; как вы, наверное, уже прочитали, это сокращенная запись трех свойств и может быть записано так:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;

flex-grow показывает, может ли расти флекс-элемент и насколько
flex-shrink показывает, может ли уменьшаться флекс-элемент и насколько
flex-basis показывает исходный (базовый размер/ширину) элемента, относительно которых уже он увеличивается или уменьшается.

Давайте посмотрим на ваши кнопки.

Для обычного "большого" экрана эти параметры никак не заданы, значит, действуют параметры по умолчанию:

flex-grow: 0; /* элемент не может расти/растягиваться больше, чем исходный размер */
flex-shrink: 1; /* элемент может сжиматься меньше, чем исходный размер */
flex-basis: auto; /* исходный размер равен auto, то есть равен просто ширине элемента, но ширина элемента не задана, поэтому по содержимому */

То есть получается, что тут просто две кнопки прижаты к левому краю экрана. Ширина кнопок не задана, значит, ширина определяется содержимым. При этом кнопки могут перескочить на вторую строку, так как задан flex-wrap: wrap.

Для маленького экрана задано так:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;

Первая строчка позволяет кнопкам растягиваться в ширину и в данном случае это никак не влияет на результат.

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

А вот в третьей строчке задан базовый размер (ширина) элемента-кнопки: теперь он равен 100% ширины родителя. Именно поэтому кнопки растягиваются на всю ширину. А из-за flex-wrap: wrap вторая кнопка без проблем перескакивает на вторую строку. Получились две кнопки максимально возможной шириной.

Тот же эффект вы можете получить, если зададите для кнопок width: 100%.

БЛОГ НА HUSL

Объяснение записи flex: 1 1 100%

Ответы (1 шт):