score:0

Accepted answer

in order for the justifycontent property to work, you first need to set to make it a flex container. also, to have your items evenly spaced, instead of space-between, use the below:

const flexstyle = {
    display: 'flex',
    position: 'absolute',
    zindex: 1,
    margin: 20,
    justifycontent: 'space-evenly',
    alignitems: 'center'
};

in addition to the above, i noticed that that the container is absolutely positioned. adding a width of 100% will do the trick for you.

score:0

this is not related to react, you need to specify the width of the absolute element.

.flex-container {
  display: flex;
  position: absolute;
  z-index: 1; 
  width: 100%;
  justify-content: space-between;
  align-items: center
}

.labelstyle {
  padding: .5em 1em;
  background-color: yellow;
}
<div class="flex-container">
  <label class="labelstyle">
                data
            </label>
  <label class="labelstyle">
                moreinfo
            </label>
  <label class="labelstyle">
                interestingmessage
            </label>
</div>


Related Query

More Query from same tag