How to decide the layout according to the number of flex children?

Question

How to decide the layout according to the number of flex children?

Is it possible to adjust layouts in css/html based on the number of child elements?

Below is an example layout for reference.

I have tried using nth-child, but I might not be implementing it correctly...

https://codepen.io/brycesnyder/pen/EvBzWq

My goal is to make all elements occupy 50% width and stack if there are multiple ones.

/* three items */
li:first-child:nth-last-child(3):not(:first-child),
li:first-child:nth-last-child(3) ~ li {
    background: green;
}

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

UPDATE: While it can be done with standard elements like this https://codepen.io/brycesnyder/pen/GvbbyY, I am looking to achieve the same result with just a UL > LI structure

html css layout flexbox

Answer 1

Answer №1

Instead of determining the layout based on the number of children, you can achieve the desired look by adjusting the flex direction to column, setting the width to 50%, and ensuring the first element has a flex property of 0 0 100%. Additionally, you'll need to handle the special case of a list with only one child by setting its width to 100%.

The necessary CSS code will be:

ul {
    padding:10px 1px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    list-style-type: none;
}

li {
    outline:1px solid gray;
    text-align:center;
    width: 50%;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

li:first-child {
    height: 100%;
    flex: 0 0 100%;
}

/* Handle one item case */
li:first-child:nth-last-child(1) {
    width: 100%;
}

Here is a Codepen link where you can see the implementation:

https://codepen.io/kball/pen/yomyyg

Answer 2

Instead of determining the layout based on the number of children, you can achieve the desired look by adjusting the flex direction to column, setting the width to 50%, and ensuring the first element has a flex property of 0 0 100%. Additionally, you'll need to handle the special case of a list with only one child by setting its width to 100%.

The necessary CSS code will be:

ul {
    padding:10px 1px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    list-style-type: none;
}

li {
    outline:1px solid gray;
    text-align:center;
    width: 50%;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

li:first-child {
    height: 100%;
    flex: 0 0 100%;
}

/* Handle one item case */
li:first-child:nth-last-child(1) {
    width: 100%;
}

Here is a Codepen link where you can see the implementation:

https://codepen.io/kball/pen/yomyyg

How to decide the layout according to the number of flex children?

Answer №1

Similar questions

Tips for implementing vertical scrolling in a Windows 8 app when in snapped view

Fixed position of the rotated button placed at a 90-degree angle on the right side of the screen

Conceal Choices During Search using jQuery Select2

Experience a seamless transition to the next section with just one scroll, allowing for a full

Grab a parameter from the URL and insert it into an element before smoothly scrolling down to that

Expanding and filling the parent container both horizontally and vertically with Bootstrap 4 cards arranged in columns

Getting the full referrer URL can be achieved by using various methods depending

Why do I continue to encounter the error message saying 'jQuery is not defined'?

How can I use flexbox to position this footer at the bottom of its parent container?

Randomly assigning a unique color to each div upon loading the page

Generate a purposely filled css grid with excessive content

Chrome has trouble correctly displaying SVG when it is inlined in HTML

Pressing the enter key should trigger jQuery to submit the form

Tips for showing all percentages on a Google PieChart

The canvas element automatically removes itself after being resized within an HTML5/JavaScript environment

Desktop display issue: Fontawesome icon not appearing

Tips on incorporating animations into a class design?

How can you target a custom tag using a wildcard in CSS?

CSS nth-child doesn't target specific element

Wordpress Website Lagging in Loading Speed