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

https://i.sstatic.net/bFCZV.png

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

https://i.sstatic.net/iCxof.png

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

Designing materials involves organizing 5 items in a section, as dividing 12 by 5 results in an unattractive

Incorporating the Material Design Light library into my webpage, I have a section with 5 items that I want to evenly occupy the space: <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp social-section"> <a href="http: ...

cssmaterial-design

What is the best way to retrieve the value of a div using AutoIt?

For this particular scenario, my objective is to extract a specific value from the last div element in the following list: <div id="past"> <div class="ball ball-8" data-rollid="242539">11</div> <div class="ball ball-8" data-ro ...

htmlwebautoit

Unable to get the splash screen to display at 100% height using CSS

Here is an example of a splash screen I have created. HTML <div id="spalsh"> <span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span> </div> CSS #spalsh{ width: 98%; ...

css

Achieving perfect alignment of an iframe on a webpage

Having an issue with aligning the iframe on my website. I have two buttons set up as onclick events that connect to internal pages displaying PHP data in tables within the iframe. Despite trying various CSS styles and positioning methods, I can't seem ...

javascripthtmlcssiframe

Do styled components have the capability to perform calculations similar to SCSS?

Using SCSS, I have the power to work wonders with CSS: @for $i from 1 through $total-items { li:nth-child(#{$i}) { animation-delay: .25s * $i; } } I am currently developing a React App that utilizes styled components. Is it possible to achieve th ...

cssreactjssassstyled-components

Is it possible to target the HTML element or root node using the nth-child selector?

During one of my teaching sessions, I was discussing the nth-child() pseudo-selector with a student. I posed the question: Can you use the nth-child selector to target any HTML element? The response I received was negative, as it is not possible to select ...

htmlcss

What methods can be used to authenticate the user's input?

I am facing an issue with my program where it breaks if there is a space behind the last number entered. I want to prevent the function from breaking when a space is entered. I tried using $.trim but couldn't get it to work. I also attempted using an ...

javascripthtml

Integrating a title field into every p-column with ng-template

I am exploring ng-templates for the first time. I have managed to customize each column to display names accurately, but I am encountering an issue. I would like to incorporate a title field in order to show a tooltip with the full name when hovering over ...

htmlangulartemplatesprimeng

Spacing between products in Woocommerce product list

Welcome to my website! Check it out here: I am facing an issue with a long margin at the bottom of my woocommerce product list. I have tried using CSS to change it as shown below: .woocommerce .products ul, .woocommerce ul.products { margin-bot ...

csswordpresswoocommerce

All hyperlinks are displayed as a single entity

I have 5 image links displayed side by side, but when I hover over them, they act as one collective link. Can someone please assist me with resolving this issue? After updating my code to include the entire div, it seems that there is something within the ...

htmlcss

ever-evolving background-image with dynamic CSS styling

Being new to both PHP and Javascript, please excuse any mistakes in my explanation. I have information stored in a PHP array that I bring to my index page using the function below (located in a separate file called articles.php that is included in my index ...

phpjavascripthtmlcssbackground-image

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

javascriptcssdjango-templatescarousel

Place each label and input element on a separate line without using div tags

Can we separate form elements onto individual lines without enclosing them within divs? For example: <label for="one">One:</label> <input type="text" id="one"> <label for="two">Two:</label> <select id="two"> ...

htmlcssforms

Tips for aligning an HTML button with a hyperlink

<form method="get" action=https://www.wwf.de/spenden-helfen/allgemeine-spende> <button type="submit">Donate Now</button> I am facing an issue where the button is appearing randomly on my website, but I need it to ...

htmlcssbuttonstylespositioning

What is the established procedure for resetting all elements within an (X)HTML document?

Is there a way to reset elements without using a form like how it can be done with JavaScript? document.forms[0].reset(); I am utilizing AJAX, so do I need to loop through all the elements using JavaScript? ...

javascripthtmlajaxdomxhtml

Currently, my goal is to create a functional copy button through the use of JavaScript

I've been attempting to create a basic copy button using JavaScript, but I keep encountering an error. TypeError: null is not an object (evaluating 'myInp.select') Whenever I click the copy button, My code looks like this: <!DOCTYPE htm ...

javascripthtml

Ensuring even distribution of three divs within a container

Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...

htmlcss

What is the best way to achieve a stylish Bootstrap modal design with a blurred and transparent header, as well as a left sidebar that seamlessly blends into

Is it feasible to create a modal with a blurred (transparent) background for the header section, allowing the site to show through? Additionally, can a sidebar on the left side of the modal also be transparent and blurred, revealing the site underneath? C ...

javascripthtmlcssbootstrap-4bootstrap-modal

Difficulty Uploading Files

I'm facing an issue when trying to upload multiple files. When I select more than 1 djz_file, no information is obtained from $_POST and $_FILES. However, if it's a single file, everything works as expected. <fieldset> ...

phphtmlfile-upload

Encountering a challenge while attempting to adjust the navigation bar at the top as the user scrolls through the page

I've been working on making the navigation bar stay fixed at the top of the page when the user scrolls, but I'm running into some issues. It seems that certain elements are overlapping the navigation bar, causing them to hide the navigation bar a ...

jqueryhtmlcss