Мобильная версияПочему мои гибкие дети не одинакового размера? ⇐ CSS
-
Гость
Почему мои гибкие дети не одинакового размера?
Despite specifying a set height and width for the parent container and allocating each child the same amount of space, when I set the justify-content, one div will be larger than the others. No matter how much I play around with them I cannot get them to take up an equal distribution of space.
Strangely, this effect does not seem to be present at certain container sizes, and will shift at others. For example in the code pen I have provided, I have used the mobile-specific dimensions from my project, and then gave it a scale of 5 to make it easier to see the "imperfection". However, at different sizes set by my media queries it may be the top or bottom div that appears larger than its sibling at any given breakpoint.
So how can I make them all appear their actual size at all times.
.header { height: 200px; width: 500px; margin: auto; display: flex; } .flex-container { height: 20px; width: 20px; background-color: black; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; transform: scale(5); } .child { display: block; background-color: white; height: 10%; width: 90%; } As mentioned, I have given this a transform:scale() to make it easier to see, but the problem persists in the absence of this.
Источник: https://stackoverflow.com/questions/781 ... qual-sizes
Despite specifying a set height and width for the parent container and allocating each child the same amount of space, when I set the justify-content, one div will be larger than the others. No matter how much I play around with them I cannot get them to take up an equal distribution of space.
Strangely, this effect does not seem to be present at certain container sizes, and will shift at others. For example in the code pen I have provided, I have used the mobile-specific dimensions from my project, and then gave it a scale of 5 to make it easier to see the "imperfection". However, at different sizes set by my media queries it may be the top or bottom div that appears larger than its sibling at any given breakpoint.
So how can I make them all appear their actual size at all times.
.header { height: 200px; width: 500px; margin: auto; display: flex; } .flex-container { height: 20px; width: 20px; background-color: black; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; transform: scale(5); } .child { display: block; background-color: white; height: 10%; width: 90%; } As mentioned, I have given this a transform:scale() to make it easier to see, but the problem persists in the absence of this.
Источник: https://stackoverflow.com/questions/781 ... qual-sizes
