Question 381022 in CSS Question posted in
Some basic documentation can be found here.

Css – Flex elements do not take all the available space before breaking into a new line

I’m trying to achieve the next design, where the elements take all the available space before breaking into a new line and also keeping the text centered:

enter image description here

Right now I’m using these styles in the container:

display: flex;
justify-content: center;
flex-wrap: wrap;

but Im getting this result:

enter image description here

I’m using a simple container with divs inside, each div have a span and anchor element inside like this: enter image description here

there aren’t any extra styles being applied

Tags:

2

Answers


  1. 0

    You haven’t shared your full HTML and CSS, so I can only answer your question by adding my own example. Note that it is easier for readers when you post code as text and do not use images.

    The problem seems to be that you do not start at the start of the first line but center the content and that items cannot grow enough (do not take all available space due to the standard flex-grow behavior):

    <div class="container">
  <div class="item"><span>Item 1</span><a href="#">Link</a></div>
  <div class="item"><span>Item 2</span><a href="#">Link</a></div>
  <div class="item"><span>Item 3</span><a href="#">Link</a></div>
  <!-- .... -->
</div>

    .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start; /* align items to the start of the line */
  gap: 10px; /* spacing between items */
}

.item {
  margin: 5px;
  flex-grow: 1; /* allows items to grow and take up any available space */
  text-align: center; /* centers text within each item */
}

/* Minimum space around the container (optional) */
.container {
  padding: 10px;
}

    To add a visual separator like a pipe (|) between your flex items, you can use the ::after pseudo-element in CSS. This approach allows you to insert content after each item except the last one, which is a common requirement for such separators.

    .item::after {
  content: "|";
  position: absolute;
  right: -10px; /* specific spacing and styling needs */
  top: 50%; /* Aligns with the middle of the item */
  transform: translateY(-50%); /* centered vertically */
  color: #ccc; /* Optional: sets the color of the separator */
}

.item:last-child::after {
  content: none; /* Removes the separator from the last item */
}
    Login or Signup to reply.
  2. 0

    Make sure the link has the next CSS property:

    overflow-wrap: break-word;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search