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

CSS with a "true" space for a fixed element (ensuring the previous element does not overlap with the current fixed element)

I am facing an issue with the layout of my webpage. I have two horizontal columns - the left one is fixed, along with a bottom footer that is below the second content column. When I add a border to the content column, it extends all the way down to the fo ...

cssfixedspaceoverlap

Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture: The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the le ...

htmlcsstwitter-bootstrap-3

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript. Section A contains a list of variable ...

csshtml

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

jqueryhtmlcssscroll

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

I'm seeking guidance on how to convert this jQuery code into pure Javascript. $('.revealedBox').each(function() { if ($(window).scrollTop() + $(window).height() > $(this).offset().top + $(this).outerHeight()) { $(this).addCla ...

javascriptjquerycss

What is the best way to position this sidebar on the right instead of the left?

I am having trouble implementing a responsive sidebar with a toggle icon. I found one on Codepen, but it is currently aligned to the left. How can I align it to the right? I have been searching through the code and have tried using text-align and justify- ...

htmlcss

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

javascripthtmlcss

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

javascripthtmlcss

Fixing the vertical centering of content when printing HTML

My bootstrap 4-based HTML page is looking good on most screens, but when I try to print it, the content is vertically centered in the print layout. How can I ensure that the content is displayed at the top of the paper? Below is the HTML code snippet for ...

htmlcssbootstrap-4printing

Applying a translucent layer of color to a jpeg image to create a subtle background effect

I am attempting to create a semi-transparent, solid background color on top of an <img> tag, while still showing the original image underneath at the same ratio and size. Below is a snippet of the code I am working with (let me know if you need more ...

javascripthtmljquerycss

The dropdown within the modal is proving elusive for Selenium to locate

I am attempting to choose a value from the dropdown menu labeled 'ddl_settpymtaction' using Selenium, but unfortunately it seems to be unable to locate it within the modal where it is located. CSS: https://i.stack.imgur.com/3YWQu.png Selenium ...

c#cssselenium

Adjust the height of the drawer in material-ui

In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...

cssreactjsmaterial-ui

What steps are involved in creating a table using Bootstrap framework?

Hey there! I need your expertise on how to create a specific layout using bootstrap: codepen.io/anon/pen/bqJdQJ <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div cl ...

htmlcsstwitter-bootstraptemplates

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

javascripthtmlcssreactjs

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

javascriptjqueryhtmlcss

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

cssgwtgwtbootstrap3

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

Looking to distinguish selected options in a multiple select in AngularJS by making them bold?

When working with Angular, I have a multiple select drop down with options such as Select fruits, Apple, Orange, Banana. How can I make the selected options, like Banana and Apple, appear in bold and change background colors? ...

htmlcssangularjsselect