At the top of this list is the incomplete line, eager to be

I created a unique flexbox design showcasing various elements. These elements behave like text, flowing inline and wrapping as needed, but expanding equally to fill the available space on the line. However, I encountered a challenge:

My goal is for it to resemble this:

How can I achieve this? Adjusting flex-grow and width does not provide a solution since I am unsure which elements to target. Using flex-direction: row-reverse will reverse the order of the elements, but the layout remains unchanged.

htmlcsslayoutflexbox

Answer №1

Avoid depending too heavily on the browser's automated calculations.

Take a look at the approach I've developed: http://jsfiddle.net/AZtY8/

If you haven't specified margin, padding, and border, here's how the flex-basis is determined:

  • For 2 items in a row, the flex-basis ranges from 50% to 34%
  • For 3 items, the flex-basis ranges from 33% to 26%
  • For 4 items, the flex-basis ranges from 25% to 21%, and so on

HTML:

<div>
<div class="wide"></div>
<div class="wide"></div>
<div class="wide"></div>

<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>

CSS:

body > div {
    background-color: #90a; margin: 4px; padding: 2px;
    display: flex;
    flex-wrap: wrap;
}
body > div > div {
    background-color: #af3; margin: 4px;
    height: 100px;
    flex-grow: 1;
    flex-basis: 20%;
}
body > div > div.wide {
    flex-basis: 30%;
}

Answer №2

After experimenting with the example image, I had a breakthrough moment. Rotation is the key!

http://codepen.io/xyz/pen/abc123

By adding transform: rotate(180deg) to both the flex-container and its contents, you can achieve a display that is right-side up while the layout appears upside down. It's important to rearrange the markup so that the contents are reversed (otherwise, the first item would end up at the bottom due to the transformation).

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

iOS search button with a unique blue outline border

On iOS, I'm seeing a strange blue border that I can't seem to get rid of. see image for reference I've exhausted all options like :focus and :active, but I can't pinpoint the source of the border. I've searched through different ...

htmlcssiosbootstrap-4border

What is the best way to retrieve the value from a React Img element?

I am having an issue with receiving 'undefined' from the console.log in 'handleClickVideo'. How can I properly extract the value when clicking on a video? I attempted using a div as well, but since div does not have a value property, it ...

javascripthtmlreactjs

Having difficulty grasping the concept of MVC within the context of my website's code

I'm struggling to grasp the concept of utilizing model-view-controller in the context of my registration system. As far as I understand it, the view loads, displaying the registration HTML form to the user. Once the user submits the form, a JavaScript ...

javascriptphpajaxhtmlmodel-view-controller

List items are not appearing correctly on display

When attempting to design a basic navbar, I encountered an issue where the list items were stacking on top of each other instead of displaying horizontally as intended. The parent container has a position of relative, while the child is set to absolute. ...

htmlcss

Using AJAX to implement CSS class effects

Currently, I am facing an issue with applying a highlighting effect to list items in a menu using a snippet of code. The menu items are just POST and I have created a second step to the menu where I want to apply the same effect to any element with a class ...

javascripthtmlcss

Tips for opening local HTML files on iPhones and Android devices

Is there a way to access local files on my PC from my iPhone and Android devices without having to upload them to an FTP server each time? I currently use Windows 7 with an iPhone 4 and an Android device. When I need to view a file on my iPhone's brow ...

androidhtmlcssmobile-safariiphone

Tips for optimizing iframe loading times using the onload event

I am facing an issue with the timing of iframe loading while using a list of URLs as sources. I have created a child iframe and appended it to the DOM, then run the onload function for further processing. However, the time recorded for each iframe seems in ...

javascripthtmlwebside-channel-attacks

vue.js experiences a delay in firing the mouseleave event

My sidebar is a simple design in HTML with a script that causes it to open and close when the mouse enters and leaves. I utilized Vue.js for the entire sidebar, everything is functioning well except for one issue - when the mouse hovers over an item in the ...

javascriptcssvue.js

Expand and collapse button for viewing more content

I need help figuring out how to display a list of 10 items on my website. I want to show only three items initially, with a "View More" button that, when clicked, will reveal the remaining items. The button should then change to "View Less" so users can ea ...

javascriptjqueryhtmlcssbootstrap-4

Display a toggle button to show or hide a particular div when looping through a MySQL fetch

I wrote a function that toggles the display of a button when it's pressed: <script language="javascript"> function toggleButton() { var btn = document.getElementById("toggleBtn"); if (btn.style.display === "none") { btn.style ...

phphtmlshow-hide

What is the best way to position my inline-flex element at the bottom of the page?

I'm trying to understand how flex-inline works. I want to make the height expand to 100% and reach the bottom of the screen without overcrowding it with content. html,body{margin:0;padding:0} body{background:black;} #sidebar{ display: inline-f ...

css

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Having trouble with a basic PHP/SQL search bar for my database. The search results are not showing up even though the search bar appears on the page. When I type something, it doesn't reflect in the URL. Below is the code snippet. I am connecting to t ...

phphtmlmysqlmysqli

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular

Interactive JavaScript Linkage

Recently, I came across some code that I inherited (definitely not mine!) which uses a session variable in the HTML header to link to a specific javascript file. For example: <SCRIPT language="javascript" src="../JavaScript/<%=Session("jsFileName") ...

javascriptasp.nethtmlvb.netvisual-studio-2003

Vue.JS is unable to parse JSON data

Recently, I decided to experiment with Vue JS and started working on a new page. One of the features I wanted to include was a button that would trigger a chat module to pop up. Here's the current code snippet I have: <!DOCTYPE html> <html l ...

htmlcssvue.jspopupvuetify.js

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

javascriptjqueryhtmlweb

Locate specific text within the content and apply an underline to it

Is there a way to locate specific text on my website and apply an underline to it? Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them. Here is my attempt at the code: $( "body:contains('hell ...

jqueryhtmlcss

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

I have successfully developed a Google App Script that links to a Google Sheet serving as a database. The application iterates through each row, and I showcase each column as part of an employee bio page entry. ex. Picture | Name | Title | Phone | Email ...

htmlcssarraysbootstrap-4

Retrieve the Current Time with an Ajax Request

Hi there, I am facing an issue with calling code from an ajax request for getting the current time. I have set up an HTML file with a working clock in it, but when loading the text from $container1, the clock and date are not displaying on the page. Can an ...

javascripthtmlcssajax

Is it possible to equalize the size of these list elements?

I'm new to working with HTML and CSS. My goal is to have navigation buttons that are all the same size, occupying one third of the width of the panel they are placed in. I have access to the original code but can only make adjustments rather than comp ...

htmlcsstwitter-bootstrapbootstrap-4