How can we ensure content is aligned to the right when flex-wrap is activated, and distributed evenly with space-between when

I have been searching for a solution to my problem, but I am struggling to articulate my question in a concise manner. So far, I have come up empty-handed.

Here is the scenario:

When viewed on a large screen, I want the layout to look like this:

edge| [CONTENT A] ... space ... [CONTENT B] |edge

I have been able to achieve this using justify-content: space-between.

However, when the window size is reduced, the layout changes to:

edge| [CONTENT A] ... space ... |edge
edge| [CONTENT B] ... space ... |edge

(I am using flex-wrap: wrap)

What I would like is:

edge| ... space ... [CONTENT A] |edge
edge| ... space ... [CONTENT B] |edge
  • I have experimented with width: 100%; text-align: right, but on larger screens, the content appears centered because content A is pushed to the right.
  • I tried using margin-left: auto, which provides a similar visual effect: it works on smaller screens, but content A still looks centered on wider screens.
  • Using 
    align-items: flex-end; align-content: flex-end
    did not produce the desired effect.
  • Even align-self: flex-end did not yield results.

Any suggestions would be greatly appreciated. Thank you.

htmlcssflexbox

Answer №1

Using the combination of `row-reverse` and `wrap-reverse` will achieve the desired layout

.container {
  display:flex;
  justify-content:space-between;
  flex-flow: row-reverse wrap-reverse;
  /* OR
     flex-direction: row-reverse;
     flex-wrap: wrap-reverse;
  */
  
  /* to highlight */
  overflow:hidden;
  resize:horizontal;
  padding:10px;
  border:1px solid;
  /**/
}

.container > div {
  padding:10px 30px;
  border:1px solid blue;
} 

.container > div:first-child {
  order:1; /* adjust the order when using row-reverse */
}
<div class="container">
<div>Lorem Ipsum A</div>
<div>Lorem Ipsum B</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

Trouble with HTML5 videos not functioning on Apple iOS gadgets

Having trouble playing my HTML5 videos on iOS devices, specifically iPhone 7.0 and iPad 7.0.4. Currently experiencing an issue where the iPad shows only an empty container and the iPhone displays a play button with a line through it. Any thoughts on what m ...

iosiphonehtml.htaccessvideo

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

javascripthtmlcssslider

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

javascriptphpjqueryhtmlhttp-redirect

Head over to the registration page if your login attempt is unsuccessful

I am currently working on developing a basic login page. The process involves users signing up on the register page first, and then attempting to log in. If the login credentials match with the database, they are directed to the homepage. However, if the u ...

javascriptphphtmlmysqldatabase

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

After a user clicks on an element in my app, I have some logic that runs. For example: html <h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3> js $scope.showAlert = function(text) { console.log(' ...

javascriptjqueryhtmlangularjs

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Is there a way to access and display a website page hosted at this URL - , without encountering any authentication dialog box from my application on the same network? I have been unable to bypass the username and password entry request. I successfully imp ...

javascripthtmlajax

Creating and implementing a HTML template from scratch, devoid of any frameworks

Is there a way to create a quiz where all questions follow the same format and only one question is displayed at a time, without duplicating code? Perhaps using a template would be the ideal solution in this scenario. I appreciate your help. ...

javascriptjqueryhtmltemplatestemplating

The initial character of the input must always be a letter

I need assistance with an input element that requires 5 characters, with the first character being a letter: <input mdInput #acronyme placeholder="Company" type="text" maxlength="5" minlength="5" required [value]="acronyme.value.toUpperCase()"> Th ...

htmlangulartypescript

Displaying the usernames of the users on the interface leads to encountering the 'Undefined Index' error

Hey there, I'm currently facing an issue with displaying the user's first name as a greeting message on index.php. I want it to say 'Hello, (user's first name)', but since I'm fairly new to PHP, I'm struggling to make it ...

phphtmlmysqlphpmyadminxampp

Align audio and video elements in HTML5 using JavaScript

I am facing a situation where I have two files - one is a video file without volume and the other is an audio file. I am trying to play both of these files using <audio> and <video> tags. My goal is to make sure that both files are ready to pla ...

javascripthtmlaudiovideo

Discover the method for selecting an element within a table that includes a style attribute with padding using Jquery

Looking for a way to identify a td element with the padding style in a table I've attempted to locate a td element with the padding style attribute in a table $(Table).find('td[style="padding:"]') or $(Table).find('td[style] ...

javascripthtmljquerycss

Handling routerLink exceptions in Angular 2, 4, and 5

In my app, I am working on catching routing exceptions. There are three ways in which a user can navigate: If the user types the address directly - this can be caught easily by using { path: '**', redirectTo: 'errorPage'} in the route ...

javascripthtmlangular

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

javascriptjqueryhtmlcssdom

Using Javascript's document.write function to modify the content of a PHP page

Here is a Javascript function that capitalizes the first letter of a string: function capitalizeFL(string) { return string.charAt(0).toUpperCase() + string.slice(1); } In a file named statuswindow.php, there are PHP scripts that use this function to ...

phpjavascriptjqueryhtmlajax

Button to save and unsave in IONIC 2

I am looking to implement a save and unsaved icon feature in my list. The idea is that when I click on the icon, it saves the item and changes the icon accordingly. If I click on it again, it should unsave the item and revert the icon back to its original ...

javascriptandroidhtmlangularjsionic2

Tips for modifying the height of a bootstrap-vue table and enabling scrolling with a fixed header

I have a div containing a b-table that I need help adjusting the height for. I want to make the table scrollable with a fixed header. Can anyone assist me? Here is my code: Code inside the template: <div class="tbl-barangay"> <b-table stripe ...

htmlcssvue.jsbootstrap-4bootstrap-vue

Navigate to the line situated at the exact midpoint vertically

I have a div with child elements, each containing a line of text. <div id="aboutxt"> <div class="line">TEXT_LINE_ONE</div> <div class="line">TEXT_LINE_TWO</div> <div class="line">TEXT_LINE_THREE</div> ...

jquerycss

"Can you explain the method by which reveal.js adjusts the size of

I have been exploring the resizing behavior of elements in reveal.js and trying to understand how they dynamically adjust. If you resize the page height, you can observe that the elements shrink up to a certain extent along with the page. However, when in ...

javascripthtmlcssreveal.js

Center JQuery within the current screen

My implementation of Jquery dialog is as follows: <body> <div id="comments_dialog"> Insert a comment <form> <input type="text" id="search" name="q"> </form> </div> .... </body> dialog = $( "#com ...

javascriptjqueryhtmlcss

What is causing the section to cover the navbar?

My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help? Currently using bootstrap v5.3.0-alpha1. Additionally, when I have a collapsed nav ...

htmlcsstwitter-bootstrapbootstrap-5