Flex row wrap grow but not the last line

Developer
Andrea Verlicchi
Size
2,065 Kb
Views
26,312
  1. Flex row wrap grow but not the last line Previews
  2. Flex row wrap grow but not the last line HTML Codes
  3. Flex row wrap grow but not the last line CSS Codes

How do I make an flex row wrap grow but not the last line?

Using flex with flex-grow to make elements fit a row at their best, but avoiding the last line to grow to 100% width.. What is a flex row wrap grow but not the last line? How do you make a flex row wrap grow but not the last line? This script and codes were developed by Andrea Verlicchi on 08 September 2022, Thursday.

Flex row wrap grow but not the last line Previews
IQ Test

Flex row wrap grow but not the last line - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex row wrap grow but not the last line</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flex row wrap grow but not the last line - Script Codes CSS Codes

body { font-family: sans-serif;
}
ul { display: flex; flex-wrap: wrap;
}
li { flex-grow: 1; min-width: 130px; max-width: 200px;
}
li:nth-child(even) a { background: #933;
}
a { margin-top: 1px; margin-right: 1px; padding: 10px; display: block; background: #732626; color: white; text-decoration: none;
}
Flex row wrap grow but not the last line - Script Codes
Flex row wrap grow but not the last line - Script Codes
Home Page Home
Developer Andrea Verlicchi
Username verlok
Uploaded September 08, 2022
Rating 3
Size 2,065 Kb
Views 26,312
Do you need developer help for Flex row wrap grow but not the last line?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andrea Verlicchi (verlok) Script Codes
Name
CSS 3 only Smoke animation
Hiding images without the src attribute
CSS vars based layout spacing
A Pen by Andrea Verlicchi
Accessible size selection
LazyLoad async on demand
Chrome-like error page
The Excercist
CSS only spinner loading animation
A Pen by Andrea Verlicchi
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!