6 ms·
Maybe something like this, which relies solely on flex box for layout. .outer { display: flex; justify-content: space-between; align-ite
by mitemte 2y ago
Maybe something like this, which relies solely on flex box for layout.
.outer {
display: flex;
justify-content: space-between;
align-items: center;
}
.left {
flex: 1;
display: flex;
justify-content: flex-start;
}
.middle {
flex: 1;
display: flex;
justify-content: center;
}
.right {
flex: 1;
display: flex;
justify-content: flex-end;
}
- meindnoch 2y agoWrong. `flex: 1` will cause the items to have a max-width of 1/3rd the container width. E.g. if the left and right items are small icons, and the middle one is a longer text, then the text will be forced to wrap into multiple lines as soon as it tries to grow beyond 1/3rd of the available space, even though there's tons of wasted space on the left/right.