Как сделать flexbox divs полной шириной

То, что я пытаюсь сделать, - сделать каждый из этих «div» в теге «в стороне», чтобы получить полную ширину, используя flexbox.Как сделать flexbox divs полной шириной

Ширина боковой панели составляет 25%, однако поля не заполняют пространство слева & правая сторона. Я могу добавить прокладку с каждой стороны, но она становится немного грязной и разрушает align-items: center

Если вы запустите нижеследующее на полном экране, вы увидите, что я имею в виду.

aside { 
 
    display: flex; 
 
    height: 100vh; 
 
    width: 25%; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
aside div { 
 
    padding: 89.9px; 
 
} 
 
.test1 { 
 
    background-color: gray; 
 
} 
 
.test2 { 
 
    background-color: red; 
 
} 
 
.test3 { 
 
    background-color: blue; 
 
} 
 
.test4 { 
 
    background-color: green; 
 
} 
 
.test5 { 
 
    background-color: orange; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="css/custom.css"> 
 
</head> 
 

 
<body> 
 

 
    <aside> 
 
    <div class="test1">234324</div> 
 
    <div class="test2">232</div> 
 
    <div class="test3">3234324234</div> 
 
    <div class="test4">2344</div> 
 
    <div class="test5">234234234233245</div> 
 
    </aside> 
 

 
</body> 
 

 
</html>

Я достиг его ниже (см рисунок) без использования Flexbox, но я бы очень хотел, чтобы заставить его работать с Flexbox.

Without flexbox

источник

2016-08-21 Qasim Arif

Вы пытались добавить 'width: 100%;' в CSS вашего селектора 'side div'? – Xetnus

Если удалить "align-items:center;" это заставит дивы занять все пространство внутри колонны.

Если вы решите, что хотите пространства между ними или что-то еще, или вам нужно выровнять их, используйте justify-content:center;, которые все равно будут использовать весь div.

источник

2016-08-21 14:15:51

Спасибо за ответ. Не мог бы я просто сосредоточить текст внутри с помощью прокладки? –

Вы можете использовать text-align: center; для центрирования текста. Добавьте это в гибкий контейнер (в сторону) –

Awesome. Спасибо за это. –

Как сделать flexbox divs полной шириной

ответ

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