Flexbox test

Developer
Martin Boyce
Size
2,846 Kb
Views
16,192
  1. Flexbox test Previews
  2. Flexbox test HTML Codes
  3. Flexbox test CSS Codes

How do I make an flexbox test?

Flexbox container with 4 columns, 3 of which have set widths and the 4th expands to fill the available space. What is a flexbox test? How do you make a flexbox test? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Flexbox test Previews
IQ Test

Flexbox test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flexbox test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="col-xs-12"> <h1>Flexbox Test</h1> <p class="lead">flexbox container with 4 columns, 3 of which have set widths and the 4th expands to fill the available space</p> <ul class="list-group"> <li class="js-General list-group-item"> <div class="event-date">Tuesday, 11 Aug 2015 at <span class="event-time">9:30PM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Whats-On/">House History Workshop</a></div> <div class="event-location">Sutherland Library</div> <div class="event-action"> <span class="btn btn-danger btn-xs">Booked Out</span> </div> </li> <li class="js-eventPattern list-group-item"> <div class="event-date">Wednesday, 12 Aug 2015 at <span class="event-time">10:30AM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Services/Kids-Parents/Storytime/">Storytime Sylvania (Preschool)</a></div> <div class="event-location">Sylvania Library</div> <div class="event-action"></div> </li> <li class="js-General list-group-item"> <div class="event-date">Tuesday, 11 Aug 2015 at <span class="event-time">9:30PM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Whats-On/">House History Workshop</a></div> <div class="event-location">Sutherland Library</div> <div class="event-action"> <span class="btn btn-danger btn-xs">Booked Out</span> </div> </li> <li class="js-eventPattern list-group-item"> <div class="event-date">Wednesday, 12 Aug 2015 at <span class="event-time">10:30AM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Services/Kids-Parents/Storytime/">Storytime Menai (Preschool)</a></div> <div class="event-location">Menai Library</div> <div class="event-action"></div> </li> <li class="js-General list-group-item"> <div class="event-date">Wednesday, 12 Aug 2015 at <span class="event-time">6:30PM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Services/Books-Reading/Author-Talks/">Hilary Mantel, so much more than Wolf Hall</a></div> <div class="event-location">Sutherland Library</div> <div class="event-action"> <a class="btn btn-success btn-xs js-ga-tracking" data-ga-category="cta-button-bookevent" data-ga-action="click" data-ga-label="Book Now" href="https://www.eventbrite.com.au/e/hilary-mantel-so-much-more-than-wolf-hallpresented-by-joanna-penglase-tickets-17560808852">Book Now</a> </div> </li> <li class="js-General list-group-item"> <div class="event-date">Wednesday, 2 Sep 2015 at <span class="event-time">6:00PM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Services/HSC-Students/">HSC Lecture: Biology</a></div> <div class="event-location">Sutherland Library</div> <div class="event-action"> <a class="btn btn-success btn-xs js-ga-tracking" data-ga-category="cta-button-bookevent" data-ga-action="click" data-ga-label="Book Now" href="https://www.eventbrite.com.au/e/hsc-biology-tickets-17667949312">Book Now</a> </div> </li> <li class="js-General list-group-item"> <div class="event-date">Wednesday, 9 Sep 2015 at <span class="event-time">6:00PM</span></div> <div class="event-title"><a href="https://www.sutherlandshire.nsw.gov.au/Community/Library/Services/HSC-Students/">HSC Lecture: English - Metropolis &amp; 1984</a></div> <div class="event-location">Sutherland Library</div> <div class="event-action"> <a class="btn btn-success btn-xs js-ga-tracking" data-ga-category="cta-button-bookevent" data-ga-action="click" data-ga-label="Book Now" href="https://www.eventbrite.com.au/e/hsc-english-metropolis-1984-tickets-17704803544">Book Now</a> </div> </li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flexbox test - Script Codes CSS Codes

.list-group-item div { display: block;
}
.event-time { text-transform: lowercase;
}
@media (min-width: 768px) { .list-group-item { display: flex; flex-direction: row; flex-wrap: nowrap; } .event-date { flex: 0 0 255px; } .event-title { flex: 1 1 auto; padding-right: 10px; } .event-location { flex: 0 0 145px; } .event-action { flex: 0 0 85px; text-align: right; }
}
Flexbox test - Script Codes
Flexbox test - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 2,846 Kb
Views 16,192
Do you need developer help for Flexbox test?

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!

Martin Boyce (boycetrus) Script Codes
Name
Google Maps API Custom Overlay
Fetching book covers with the Google Books API
Using Google Spreadsheets as JSON Source
Get the app
First steps with Handlebars.js
Google Analytics Event Tracking using html5 data attributes
Nested flexbox layout for library catalog
Scratchpad
Test Case for ajax fail on single result v2
Nested flexbox layout for library catalog v2
Create amazing web content 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!