Flex Tests

Developer
Neviton
Size
1,734 Kb
Views
12,144
  1. Flex Tests Previews
  2. Flex Tests HTML Codes
  3. Flex Tests CSS Codes

How do I make an flex tests?

What is a flex tests? How do you make a flex tests? This script and codes were developed by Neviton on 25 November 2022, Friday.

Flex Tests Previews
IQ Test

Flex Tests - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex Tests</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> <div class="item item-4"></div> <div class="item item-5"></div>
</div>
<div class="wrapper"> <div class="item item-1-2"></div> <div class="item item-2-2"></div> <div class="item item-3-2"></div> <div class="item item-4-2"></div> <div class="item item-5-2"></div>
</div>
</body>
</html>

Flex Tests - Script Codes CSS Codes

* { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; box-sizing: border-box;
}
.wrapper { width: 560px; display: flex; background-color: DarkOliveGreen; padding: 10px; margin-top: 10px;
}
.item { flex-grow: 1; color: #fff; background-color: OliveDrab; height: 10px; text-align: center; box-shadow: inset 10px 0 0 #000, inset 20px 0 0 OliveDrab, inset 30px 0 0 #000, inset 40px 0 0 OliveDrab, inset 50px 0 0 #000, inset 60px 0 0 OliveDrab, inset 70px 0 0 #000, inset 80px 0 0 OliveDrab, inset 90px 0 0 #000, inset 100px 0 0 OliveDrab, inset 110px 0 0 #000, inset 120px 0 0 OliveDrab, inset 130px 0 0 #000, inset 140px 0 0 OliveDrab, inset 150px 0 0 #000, inset 160px 0 0 OliveDrab, inset 170px 0 0 #000, inset 180px 0 0 OliveDrab, inset 190px 0 0 #000, inset 200px 0 0 OliveDrab;
}
.item + .item { margin-left: 10px;
}
.item-2, .item-4 { flex-grow: 3;
}
.item-1-2, .item-2-2, .item-3-2, .item-4-2, .item-5-2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px;
}
.item-2-2, .item-4-2 { flex-shrink: 3; /*flex-grow: 3;*/
}
Flex Tests - Script Codes
Flex Tests - Script Codes
Home Page Home
Developer Neviton
Username nevitones
Uploaded November 25, 2022
Rating 3
Size 1,734 Kb
Views 12,144
Do you need developer help for Flex Tests?

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!

Neviton (nevitones) Script Codes
Name
Slick Carousel Sync - BUG - Updating current
Codepen API test
Display Flex IOS
Slick Carousel Sync
A Pen by Neviton
Glossary Mock
Swipe list item for option
Line Height - unitless VS em
Class Scope self tests
Backbone - Study
Create amazing video scripts 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!