Я намагаюся зрозуміти, як це зробити display:flex працює, але кожного разу, коли я його встановлюю, дитина не візьме всю ширину. Я очікував, що три двійки отримують 33% ширини екрана. Що я роблю неправильно?
.flexbox {
display: flex;
}
.flexbox div {
border: 1px solid black;
padding: 10px;
}<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>Відповіді:
3 для відповіді № 1Потрібно розповісти про те, як розширювати товари. Вони за замовчуванням не споживають вільного простору.
Початкова установка flex-basis є auto, що означає, що елементи приймають розмір свого вмісту.
Початкова установка flex-grow є 0, що означає, що продукти не будуть зростати у вільному просторі.
Додати flex: 1 до ваших предметів, що еквівалентно: flex: 1 1 0, що є скороченням для:
flex-grow: 1flex-shrink: 1flex-basis: 0.
.flexbox {
display: flex;
}
.flexbox div {
flex: 1; /* new */
border: 1px solid black;
padding: 10px;
}<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>1 для відповіді № 2
Тут ти йдеш:
<html>
<head>
<style>
.flexbox {
display: flex;
}
.flexbox div {
flex: 1;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="flexbox">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>
Щоб зробити дочірні елементи зростати, вам потрібно буде додати їх до однієї з властивостей flex. Ось чудова стаття про flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/