Как центрировать выравнивание контейнера flexbox?

Я успешно создал чувствительную сетку, как показывает фрагмент.Как центрировать выравнивание контейнера flexbox?

В настоящий момент я вижу поля, выровненные слева.

Как разместить контейнер в центре страницы без использования прокладки?

Я пробовал использовать margin:auto, но это не сработало.

.container{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    text-align:center; 
 
    margin:auto; 
 
} 
 
.box{ 
 
    width:100%; 
 
    max-width:30%; 
 
    border:1px solid red; 
 
    margin:5px; 
 
} 
 
@media only screen and (max-width:768px){ \t 
 
    .box{ 
 
     width:100%; 
 
     max-width:40%; 
 
     border:1px solid red; 
 
    } 
 
}

<section class="container"> 
 
    <div class="box"> 
 
     <h1>This is the first box</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p> 
 
    </div> 
 
</section>

JS Fiddle.

источник

2016-08-11 Wosley Alarico

ширина добавить в свой контейнер класса – chirag

чтобы использовать 'поле: auto' ваш контейнер должен иметь' width'. –

Я добавил в контейнер ширину 100%, но это не повлияло. здесь мой фрагмент: https://jsfiddle.net/cx1svoky/3/ –

Использование justify-content: center; вместо margin: auto;:

.container { 
    display: flex; 
    flex-wrap: wrap; 
    text-align: center; 
    justify-content: center; 
} 
.box { 
    width: 100%; 
    max-width: 30%; 
    border: 1px solid red; 
    margin: 5px; 
} 
@media only screen and (max-width: 768px) { 
    .box { 
    width: 100%; 
    max-width: 40%; 
    border: 1px solid red; 
    } 
}

См justifiy-content docs on MDN.

Updated JS Fiddle.

источник

2016-08-11 12:17:34

Он отлично расположен. Но я только заметил, что четвертый ящик теперь не плавает влево. Идея состоит в том, чтобы добавить ящики слева, чтобы писать, поскольку приходят больше статей. Например, если у меня есть 7 ящиков, седьмой ящик должен течь влево, а не в центр. Надеюсь, у меня есть смысл. –

@WosleyAlarico Затем вы можете использовать 'margin: 0 auto;' с фиксированной шириной, например 'width: 800px;'. См. [JS Fiddle] (https://jsfiddle.net/cx1svoky/9/). –

Это не так, как я упоминал ранее в других комментариях. Но, похоже, это единственный вариант. –

просто добавьте эту строку в исходный код:

.container{ 
    width: 100% 
}

и поставить div коробку в другую div, которые имеют margin: auto;

, если вам нужно 2 коробки в одной и той же линии добавить display: inline-table; в категорию box класс

источник

2016-08-11 12:22:54

Разум посылает скрипку? –

Используйте margin:0px auto; с width.

Например:

.container{ 

display:flex; 
flex-wrap:wrap; 
text-align:center; 
margin:0px auto; 
width: 400px; 
}

источник

2016-08-11 12:22:56

Так что, если вы хотите иметь ящики добавляются слева направо, а первое поле на следующей строке будет выравнивание по левому краю, вы можете использовать: `

.container { 
    display:flex; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
    margin: 0 auto; 
    border: 1px solid red; 
} 
.container:after { 
    content: ""; 
    flex: auto; 
}

Fiddle

источник

2016-08-11 13:00:52 Julsy

Как центрировать выравнивание контейнера flexbox?

ответ

Смежные вопросы