БЛОГ НА HUSL


Несрабатывающий флекс для изображения последнего клиента в адаптиве

Автор вопроса: wfamilyweb

Верстаю макет с Фигмы. Наверстал

/* Обнуление */
*,
*::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: #fff;
    font-weight: 400;
    font-family: Poppins;
}


.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;
}


/* =========================================================================== */

.page {
}
.page__main-block {
}
.main-block {
}
.main-block__container {
    background-image: url("../img/mainblock/mainimage.png");
    background-size: 100% 100%;
    height: 811px;
    /*width: 1441px;*/
}
.main-block__logo {
}
.main-block__body {
    /*margin-top: 22px;*/
    width: 50%;
    /*display: flex;
    flex-direction: column;*/
}

@media (max-width: 1366px) {
    .main-block__body {
        display: flex;
        flex: 0 1 50%;
        flex-direction: column;
    }    
}

.main-block__smalltitle{
    /*position: relative;*/
    height: 21px;
    margin-left: 166px;
    /*right: 83.77%;*/
    /*top: calc(50% - 21px/2 - 195.5px);*/
    margin-top: 130.96px;
    width: 100px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */


    /*color: #FFFFFF;*/
    z-index: 10;
}

.main-block__title {
    /*position: absolute;*/
    margin-left: 166px;
    width: 616px;
    margin-top: 22px;
    /*bottom: 35.68%;*/
    height: 222px;
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 74px;
    /* or 123% */
    
    
    /*color: #FFFFFF;*/
    z-index: 10;
}
.main-block__text {
    margin-top: 24px;
    margin-left: 166px;
    width: 581px;
    height: 55px;
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    z-index: 10;    
}
.main-block__items {
    margin-top: 45px;
    margin-left: 166px;
    padding-bottom: 170px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;    
}
.main-block__link {
    height: 24px;
}
.main-block__link_yellow {
    color: yellow;   
}
.main-block__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}

/* ============================================================================ */

.main-block__logo_white_triangle {
    width: 42px;
    height: 35px;
    left: 164px;
    top: 27.27px;
    
    background: #FFFFFF;
    /*transform: matrix(1, 0, 0, -1, 0, 0);*/
}
.main-block__logo_yellow_triangle {
    width: 29.21px;
    height: 24.35px;
    left: 176.78px;
    top: 27.27px;
    
    background: #F6F6F6
}

.main-block__logo_name {

    width: 179.23px;
    height: 33.05px;
    margin-left: 214.8px;
    margin-top: 23px;
    
    background: #FFFFFF;
    z-index: 15;
}

.main-block__logo_hamburger_icon {
    margin-top: 23px;
    margin-right: 214.8px;
    width: 40px;
    height: 40px;

    background: #ffffff;
    z-index: 15;
}

.main-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========================================================================== */

._icon_clients_container {
    /*margin-left: 166px;*/
}

.clients__items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
/*
@media (max-width: 1193px) {
    .clients__items {
        flex-wrap: wrap;
    }
}
*/
@media (max-width: 779px) {
    .clients__item {
        flex: 0 1 25%;
    }
    .clients__item:last-child {
        flex: 1 1 100%;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">    
    <title>Webovio</title>
</head>
<body>
    <div class="wrapper">
        <main class="page">
            <div class="page__main-block main-block">
                <div class="main-block__container">
                    <div class="main-block__header">
                        <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
                        <!--<div class="main-block__header_image_1">-->
                            <img  src="img/header/logo/webovio.png" class="main-block__logo_name" alt="logoname">
                        <!--</div>-->
                        <!--<div class="main-block__header_image_2"></div>-->
                            <img  src="img/header/hamburger.png" class="main-block__logo_hamburger_icon" alt="menulogo">                       
                        <!--</div>-->
                    </div>
                    <div class="main-block__body">
                        <div class="main-block__smalltitle">A place where</div>
                        <div class="main-block__title">A creative agency for redemptive brands</div>
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                        </div>
                        <div class="main-block__items">
                            <a href="" class="main-block__link main-block__link_yellow">Get in touch</a>
                        </div>
                    </div>    
                </div>
                <!--
                <div class="main-block__image _ibg">
                    <img src="img/mainblock/mainimage.png" alt="cover">
                </div>
                -->
            </div>
            <div class="page__clients clients">
                <div class="clients__container _icon_clients_container">
                    <div class="clients__items">
                        <div class="clients__item">
                            <img src="img/clients/Andrew-Porter-Logo.png" alt="clients">
                        </div>
                        <div class="clients__item">
                            <img src="img/clients/Jalen-Rose-Leadership-Academy-Logo.png" alt="clients">
                        </div>
                        <div class="clients__item">
                            <img src="img/clients/Wal.png" alt="clients">
                        </div>
                        <div class="clients__item">
                            <img src="img/clients/Ideal.png" alt="clients">
                        </div>
                        <div class="clients__item">
                            <img src="img/clients/PhalenLeadership.png" alt="clients">
                        </div>                                                                                                
                    </div>
                </div>
            </div>
        </main>
    </div>    
</body>
</html>

В результате получаю

введите сюда описание изображения

введите сюда описание изображения

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

.clients__items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
/*
@media (max-width: 1193px) {
    .clients__items {
        flex-wrap: wrap;
    }
}
*/
@media (max-width: 779px) {
    .clients__item {
        flex: 0 1 25%;
    }
    .clients__item:last-child {
        flex: 1 1 100%;
    }
}

но несмотря на него изображение не располагается по середине)?


Источник

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

Автор решения: Ara_Bog

Если вы хотите растянуть последний элемент на всю ширину экрана и от центровать содержимое, то необходимо сделать это с самим элементом

.clients__item:last-child {
    flex: 1 1 100%;
    align-items: center;
}
→ Ссылка
Автор решения: wfamilyweb

Помогло

    .clients__item:last-child {
        flex: 1 1 100%;
        text-align: center;
    }

А с display: flex и align-items: center (с обоими командами и по отдельности) не работало.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.