How to align the last item in the bottom row using Flexbox styling

Is it possible to center the last element when resizing the window to a smaller resolution, even though the parent's justify-content parameter is set to space-between? I understand that using center or space-around would achieve the desired result, but I specifically need it to be set to: space-between.

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgba(255, 0, 0, 0.3);
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  min-width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Link to code example

cssflexbox

Answer №2

Regrettably, using flexbox won't solve your issue. However, I have a CSS workaround that can address the problem. By targeting the last element within the media-query, you can achieve the desired result. Custom breakpoints are utilized below.

 ul {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   background: rgba(255, 0, 0, 0.3);
   padding: 0;
 }
 li {
   list-style-type: none;
   display: inline-block;
   min-width: 100px;
   height: 100px;
   background: red;
   margin: 10px;
 }
 @media (min-width: 376px) and (max-width: 494px) {
   li:last-child {
     margin: 10px auto;
   }
 }
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer №3

Unfortunately, achieving the desired layout using space-between positioning is not feasible.

As stated in the CSS flexbox specification, when there is only one item on the line, the behavior defaults to 'flex-start'.

Your best option would involve manually aligning elements using techniques like media queries and auto margins. However, this method may compromise the flexibility of your layout.

Answer №4

Here is an alternative suggestion: Utilizing the calc() function to determine the width of the flex item, allowing for centering of the last element.

    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        row-gap: 10px;
    }

    .column {
        display: flex;
        width: calc(100% / 4);
        overflow: hidden;

        text-align: center;
        background: green;
    }

    .inside-column {
        background: white;
        width: 100%;
        display: block;
        margin: 15px;
        border: 5px solid red;
    }

    .wrap {
      max-width: 350px;
      background: #CCC;
    }
<div class="container">
    <div class="column">
        <a href="#" class="inside-column">
            1
            <br>Content Content Content
        </a>
    </div>
    <div class="column">
        <div class="inside-column">
            2
            <br>Content Content Content
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            3
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            4
            <br>Content Content Content
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            5
            <br>Content Content Content
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            6
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            7
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            8
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            9
        </div>
    </div>

</div>

<br>
<br>

<div class="wrap">
    <div class="container">
        <div class="column">
            <a href="#" class="inside-column">
                1
                <br>Content Content Content
            </a>
        </div>
        <div class="column">
            <div class="inside-column">
                2
                <br>Content Content Content
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                3
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                4
                <br>Content Content Content
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                5
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                6
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                7
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                8
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                9
            </div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Introducing the innovative Icon Collapsable JQuery - a versatile tool that

I'm looking to set custom icons for the JQuery Collapsable view without having to make changes to the default JQuery CSS and .JS files. You can take a look at my starting point on jsFiddle here: http://jsfiddle.net/jakechasan/M7LLU/ Although I' ...

javascriptjqueryhtmlcss

Picture in the form of a radio button

Is there a way to use an image instead of a radio button in my AngularJS form? I have managed to hide the radio button using CSS, but it disables the checked event. How can I make the image clickable? position: absolute; left: -9999px; Here is the code s ...

javascripthtmlcssangularjs

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

cssasp.net-mvcbootstrap-4

Scrollbar appearing in Safari (Windows) despite increasing the height

While working on a website for a client, I encountered an issue where a section within the footer is causing scrollbars to appear. Despite adjusting the height of the wrapper and setting overflow to hidden, the scrollbars persist. Is there anyone who can ...

htmlcss

Bug allows unauthorized access to password in Bootstrap Password Revealer

Whenever I try to reveal a Bootstrap password using the eye button, my PC freezes. Strangely, an input is automatically added even though there are no codes for it. This auto-increasing input causes my browser to hang and eventually crashes my entire PC. C ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to eliminate the header and side navigation in a master page design?

I've set up a master page called wrap.master which is connected to multiple content pages. I'm looking to create a new content page and link it to the master page. However, I want this new content page to be independent from the header and side n ...

htmlcssasp.net

Utilizing Wordpress post images to dynamically change background URLs in CSS

Is there a way to dynamically set a background image in CSS using PHP, specifically the Wordpress post image? background: <?php if(has_post_thumbnail()){ $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'dest ...

csswordpresswordpress-themingthumbnailscustom-wordpress-pages

Enhancing visual aesthetics with Vuetify on v-slot label components

I am working with Vuetify code that appears like this <v-radio-group v-model="gender" column class="radio-group-full-width"> <v-radio value="Boy"> <template v-slot:label> <v-textarea v-model="answer" v-vali ...

cssvue.jsvuetify.jsv-slot

Bootstrap Modal closing problem

While working on a bootstrap modal, I encountered an issue where the modal contains two buttons - one for printing the content and another for closing the modal. Here is the code snippet for the modal in my aspx page: <div class="modal fade" id="myMod ...

javascriptjqueryhtmlcsstwitter-bootstrap

The collapsible menu located beneath my navigation bar is unable to reach the correct position on the right side

I'm attempting to create a collapsible navigation bar with its contents shifting to the right side when resized to medium size, but I'm having trouble. Can someone please assist me with this? I have also included the code below. <nav class=&qu ...

htmlcssbootstrap-5

Adjustable TextBox (multiline input field)

In need of some assistance, I am working with a MultiLine asp:Textbox (similar to a standard html textarea) that I would like to have auto-sized to fit its content using only CSS. My goal is to have it display at a specified height in the web browser, with ...

asp.nethtmlcss

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

htmlcssnavbarsticky

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

Issues with displaying video content and controlling the Bootstrap 5 video carousel

I have encountered an issue while coding a website for a friend's company. He requested a video carousel to be added to his existing site, so I incorporated links and scripts for Bootstrap in order to create a gallery for his products and a carousel t ...

htmlcssbootstrap-4bootstrap-5

The background-size is set to cover, but it does not completely cover the

New to HTML here, I'm attempting to utilize background-size: cover; to ensure an image covers the entire screen, but I am still noticing a gap. The issue may be related to this section: body { background-image: url("hexagon.gif"); ...

htmlcss

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

Issues arise with jQuery onclick event functionality when the DOM structure is altered

I'm struggling to grasp the concept of jQuery (v1.11) when it comes to events and how DOM interaction impacts those events. The scenario: I am creating a grid of inline-blocks with the class "letter" and listening for clicks: $('.letter).on(&a ...

javascriptjqueryhtmlcssdom

Elements being impacted by the CSS Transition are being pushed

I am facing a CSS issue that I just can't seem to resolve. If you visit and check out the top search bar. On hovering over it, you'll notice it resizes to fit the content width. This is the CSS code responsible for this: .header .search-wrap ...

htmlcsscss-transitions

Updates to the Tailwind file are not appearing on the page after reopening the file

Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...

htmlcsstailwind-css

Using Javascript to prevent css from changing the display

I want to make some CSS adjustments to a single element using a single script, but I want all the changes to be displayed at once. For example: $("#someelement").css({width:"100%"}); //this change should not be displayed $("#someelement").width($("#someel ...

javascriptjqueryhtmlcss