Flex space around does not respond-CodePudding

HTML CODES I cannot use 'space-around' property.It does not work even if I wrap tag 'a' and 'svg' with div.How can I solve this problem?

.container {
  width: 300px;
}

.title {
  display: flex;
  flex-direction: space-around;
}

<div >
  <div >
    <a href="#">Library</a>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
  </div>
</div>

CodePudding user response：

As @Sfili mentioned in the comments, those styles correspond with justify-content and not flex-direction. space-around is supposed to give the elements equal spacing on both sides. So if you had a 300px container. space-around would look like so:

space-between on the other hand will space the elements on both ends of the parent. So it would space both items to the start and end of their parent. See below.

.container {
  width: 300px;
  outline: solid black 1px;
}

.title {
  display: flex;
  justify-content: space-between;
}

<div >
  <div >
    <a href="#">Library</a>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
  </div>
</div>