A guide to transforming rows into columns with CSS

Hello, I am trying to convert rows into columns using CSS. Currently, my code looks like this:

<style>
    .flex-container {
        max-width: 500px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .flex-item {
        width: 25%;
    }
</style>

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    ...
    <div class="flex-item">19</div>
</div>

Currently seeing in the browser as first step

I would like it to look like final step as shown below

htmlcss

Answer №1

Transform the layout of flexbox by modifying the flex-direction property from row to column. By default, flex direction is set to ROW but using flex-direction: col will switch it to a column layout.

flex-direction: column;

Answer №3

To achieve the desired layout, make sure to set the flex-directon property to column and add a height value to the parent element.

.flex-container {
        max-width: 500px;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
         height: 100px;
    }

    .flex-item {
        width: 25%;
       
    }
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
    <div class="flex-item">16</div>
    <div class="flex-item">17</div>
    <div class="flex-item">18</div>
    <div class="flex-item">19</div>
</div>

For more information on flexible box layout wrapping, check out this reference

Answer №4

A convenient shorthand in CSS is flex-flow

flex-flow: column wrap;

For further information, refer to the documentation on MDN.

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

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

htmlcsscss-grid

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

javascripthtmlcss

What could be causing the issue of dynamic meta open graph tags not functioning properly?

For my current project, I am utilizing Strapi as the CMS and Next.js. My task is to generate meta open graph tags dynamically. However, after deployment, when I attempt to share my website link on social media platforms such as Facebook or WhatsApp, the ti ...

htmlnext.jsmeta-tags

Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...

htmlcssalignment

Ensuring an image fits perfectly within a div that spans 100% width using CSS

I'm brand new to CSS and could use some guidance Here's the issue: I have a 1600 pixel wide image and a div that is 100% wide. Is there a method to adjust the image so it fits within the div, eliminating any horizontal scroll bars and cutting o ...

htmlcssimagewidth

Guide for accessing and interpreting a random folder arrangement using JavaScript located alongside index.html

I am currently developing a testing reporting tool that organizes images into folders, resulting in a structure similar to this: root/ /counter/ img1.png img2.png /alarm/ img3.png The names of the folders like counter and alarm are not f ...

javascriptjqueryhtml

Struggling with CSS issues in ASP.NET 4.6

For the past few months, I've been diligently working on a project that suddenly hit a snag today. Upon inspecting my website, I noticed that all my button sizes appear to be uniform. I typically use Chrome's developer tools to troubleshoot my we ...

c#cssvisual-studio-2017jquery-3asp.net-4.6

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

javascripthtmlcss

What is the best way to ensure jQuery runs as soon as the page loads?

In my current jQuery script, I have implemented a feature that checks for content in two input fields (a login page with username and password) and adds the class "used" if there is content present. $(window, document, undefined).ready(function() { $(&a ...

jqueryhtml

Eliminate any blank spaces in the SELECT Angular application for IE-CSS

One issue I encountered is removing the default selected "SELECT" option from a select drop down on my webpage. Currently, I am using to remove it successfully in Chrome and Firefox browsers, but unfortunately IE does not respond to this method. I ha ...

cssangularjsinternet-explorerselectdefault

What strategies can I implement to ensure my modal dialog box remains responsive? Adjusting the window size causes the modal box to malfunction and lose its structure

Whenever I adjust the size of the browser window, the elements inside the modal box become misaligned. HTML <div class='modal'> <div class='modal-content'> </div> </div> Below is the CSS for the modal ...

javascripthtmlcss

Sorting functionality malfunctioning after dynamically adding new content using AJAX

Greetings to all, I have a question about my views. 1- Index 2- Edit In the index view, I have a button and AJAX functionality. When I click the button, it passes an ID to the controller which returns a view that I then append to a div. The Edit view con ...

javascriptjqueryhtmlajaxjquery-ui

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

htmlcssimageatom-editor

Is there a way to continually repeat a hover effect?

Currently, I am focusing on creating a timeline and have managed to get the basic function working in jQuery. You can view my progress on jsFiddle here: http://jsfiddle.net/Jason1975/6nwkd2c8/38/ The issue I am facing is that I cannot get the hover effect ...

jqueryhtml

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

My dropdown is populated with owners from the owners data, but it includes an extra blank option. I need to eliminate this blank option. However, when I make the necessary changes to remove it, the required validator stops working properly. <md-input-c ...

javascripthtmlangularjs

Display the mobile keyboard without the presence of an input element

Attempting to display the mobile keyboard on my responsive site, I initially tried placing a hidden input with the placeholder "tap here." However, due to an event firing on this input that reloads the dom, I was unable to show the keyboard. I'm wond ...

javascriptjqueryhtmlmobilekeyboard

Unchecking random checkboxes within a div using jQuery after checking them all

Once a link is clicked on, all checkboxes within that particular div will be checked. function initSelectAll() { $("form").find("a.selectAll").click(function() { var cb = $(this).closest("div").find("input[type=checkbox]"); cb.not(":checked" ...

javascriptjqueryhtml

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...

pythonhtmlseleniumselenium-webdriver