@LaraG

Почему не срабатывает центрирование в flex-direction: column в React?

import React from 'react';
import './Footer.css';

const Footer = () => {
    return (
        <div className='main-footer'>
            <div className='container'>
                <div className='row'>
                    <div className='col'>   
                        <p className='footer__dragon'><i class="fas fa-dragon"></i> DragonBook</p>              
                    </div>  
                    <div className='col'>
                        <p><i class="far fa-copyright"></i> 2020 All right reserved</p>
                    </div>
                    <div className='col'>
                        <p>Fatto con <i class="fas fa-heart"></i> e <i class="fas fa-mug-hot"></i> per amatori dei <i class="fas fa-book"></i></p>
                    </div>          
                </div>
            </div>
        </div>
    )
}
export default Footer;

.main-footer {
    color: white;
    background-color: #a5805d;
    padding: 50px 0;
}
.footer__dragon  {
    color: #b16da8;
    background-color: white;
    display: inline;
    padding: 5px 10px;
    border-radius: 100px;
    border: 2px solid #b16da8;
}
.footer__dragon i {
    color: #b16da8;
}
.main-footer .row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow: hidden;
}
.main-footer p {
    width: 100%;
}

@media (max-width: 768px) {  
    .main-footer  .row {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ответы на вопрос 1
@cheeroque
Почему не срабатывает? Срабатывает, просто внутри футера всего один элемент — div.container. Если хотите, чтобы .col выстраивались по горизонтали, то display: flex, flex-direction и flex-wrap нужно применять к их непосредственному родителю, то есть div.row.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
14 авг. 2020, в 11:57
1000 руб./за проект
14 авг. 2020, в 11:53
4000 руб./за проект
14 авг. 2020, в 11:29
50000 руб./за проект