I have a div that that has a left aligned div and a right aligned div, each on the same line. This uses display: flex with a column-gap: 1em and justify-content: space-between. I've set flex-wrap: wrap so that if the width of the browser gets small enough, the divs will go to two lines. I would like that if a wrap condition happens that justify-content will change to center, so that the divs will be centered on the page. Is that possible?
I can do that using media queries but that is based on the width of the browser window. I want something that will center the lines only if flexbox causes the divs to wrap to two rows.
div.links{ background-color: yellow; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; column-gap: 1em; row-gap: 0.5em;}div.links div.left{ background-color: orange; text-align: center;}div.links div.right{ background-color: pink; text-align: center;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div class="links"><div class="left">Some stuff and text on the LEFT</div><div class="right">Some stuff and text on the RIGHT</div></div></body></html>