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

Question

[LaraG]

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

Answer 1

[Юрий]

Почему не срабатывает? Срабатывает, просто внутри футера всего один элемент — div.container. Если хотите, чтобы .col выстраивались по горизонтали, то display: flex, flex-direction и flex-wrap нужно применять к их непосредственному родителю, то есть div.row.

Comments

[LaraG]

Спасибо, сработало
Но теперь не работает центрирование
media (max-width: 768px) {
.main-footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

[Юрий]

Не совсем понимаю, о чём именно речь. В разрешениях до 768 включительно всё по центру. Выше — нет, но у вас и центрирования в CSS нет для экранов > 768.