Flex space around does not respond

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 class="container">
  <div class="title">
    <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" class="feather feather-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
  </div>
</div>

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:

enter image description here

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 class="container">
  <div class="title">
    <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" class="feather feather-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
  </div>
</div>

Flex space around does not respond

Related

Recent Posts