Flex Box Tiles

Developer
Richard
Size
3,468 Kb
Views
52,624
  1. Flex Box Tiles Previews
  2. Flex Box Tiles HTML Codes
  3. Flex Box Tiles CSS Codes
  4. Flex Box Tiles JS Codes

How do I make an flex box tiles?

Example percentage based tiles using flex. Plugin written to manage left alignment of last row.. What is a flex box tiles? How do you make a flex box tiles? This script and codes were developed by Richard on 02 August 2022, Tuesday.

Flex Box Tiles Previews
IQ Test

Flex Box Tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex Box Tiles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="masthead" class="image-block"> <div class="content-wrapper"> <div class="content-box bottom right"> <div class="inner"> <h1>I am a Parcentage Based Overlay</h1> <p>I will match the width of tiles below, aligning to the left of the right most tile.</p> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> </div> </div> </div> <img src="https://placekitten.com/g/1440/700">
</section>
<section class="tile-block"> <div class="content-wrapper"> <div class="tile-container"> <div class="tile" style="background:url('https://placekitten.com/g/700/500');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/750/550');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/850/400');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/600/400');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/800/500');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/800/600');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/750/650');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/900/650');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/700/500');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/750/550');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/1000/400');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/800/600');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/900/650');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/800/500');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> <div class="tile" style="background:url('https://placekitten.com/g/600/400');"> <div class="inner"> <h2>I am a Percentage Based tile</h2> <p class="width">Width : <strong class="percentage">99%</strong> (<strong class="px">330px</strong>)</p> <p class="margin">Margin : <strong class="px">330px</strong></p> </div> </div> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flex Box Tiles - Script Codes CSS Codes

html { background: url('http://placekitten.com/g/1000/700') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
::selection { background: hotpink; color: #fff; text-shadow: none;
}
p,
h1,
h2 { color: #fff; font-family: 'Virdana', sans-serif; margin: 0;
}
h2 { font-size: 1.25em;
}
strong { color: hotpink;
}
body { background-color: rgba(250, 0, 125, .5); margin: 0;
}
.content-wrapper { max-width: 1480px; margin: auto; position: relative; /*background-color: rgba(0,0,0,.75);*/
}
#masthead { position: relative;
}
#masthead .content-wrapper { position: absolute; width: 100%; top: 0; bottom: 0; left: 0; right: 0;
}
.image-block {}
.image-block .content-box { width: 32%; position: absolute; background-color: rgba(0, 0, 0, .75); margin: auto; height: 16em;
}
.image-block .content-box.right { right: 0;
}
.image-block .content-box.left { left: 0;
}
.image-block .content-box.mid { top: 0; bottom: 0;
}
.image-block .content-box.bottom { bottom: 4em;
}
.image-block .content-box.top { top: 4em;
}
.image-block .content-box.center { right: 0; left: 0; top: 0; bottom: 0;
}
.image-block .content-box .inner { padding: 2em;
}
.image-block img { width: 100%; object-fit: cover; object-position: center; min-height: 22em;
}
.image-block .content-box h1 { margin-bottom: .5em;
}
.image-block .content-box .width { margin-top: .5em; text-align: right;
}
.tile-container { display: flex; width: 100%; flex-flow: row wrap; justify-content: space-between;
}
.tile { width: 32%; margin-bottom: 0em; background-color: red; height: 20em; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.tile .inner { padding: 2em; background: rgba(0, 0, 0, .75); text-align: center;
}
.tile .inner h2 { margin-bottom: .5em;
}
@media only screen and (max-width: 1480px) { #masthead .content-wrapper, .content-wrapper { margin: 0 2em; width: auto; }
}
@media only screen and (max-width: 1024px) { .tile, .image-block .content-box { width: 49%; } .image-block .content-box.bottom { bottom: 1em; } .image-block .content-box.top { top: 1em; }
}
@media only screen and (max-width: 768px) { .tile, .image-block .content-box { width: 100%; }
}

Flex Box Tiles - Script Codes JS Codes

$('document').ready(function() { $('.tile-container ').justifier();
setContentVars();
});
$(window).resize(function(){ setContentVars();
});
function setContentVars() { $('.tile-container').hide(); $('.width .percentage').html($('.tile-container .tile').width()+"%"); $('.tile-container').show(); $('.width .px').html($('.tile-container .tile').width()+'px'); $('.margin .px').html(($('.tile-container .tile').css('margin-bottom').replace('px','')*2)+'px');
}
/* JUSTIFIER */
(function($) { $.fn.justifier = function(options) { var defaults = { tiles: '.tile' } var options = $.extend(defaults, options); var justifier = this; function createSpacers() { justifier.each(function(index) { var container = $(this); $(this).find('.spacer').remove(); var tileWidth = container.find(options.tiles).first().outerWidth(); var tilesInRow = Math.floor(container.width() / tileWidth); var tilesTotal = container.find(options.tiles).length; var tilesToAdd = tilesInRow - (tilesTotal % tilesInRow); var tileSpacerHTML = '<div class="' + options.tiles.replace('.', '') + ' spacer" style="overflow: hidden; height: 0;"></div>'; for (var i = 1; i <= tilesToAdd; i++) { container.append(tileSpacerHTML); } /* Margin Sizing */ if (tilesInRow > 1 && container.find(options.tiles).length > 1) { var totalSpace = container.find(options.tiles + '+' + options.tiles).first().offset().left - container.find(options.tiles).first().outerWidth() - container.find(options.tiles).first().offset().left; container.find(options.tiles).css('margin-top', (totalSpace / 2) + 'px').css('margin-bottom', (totalSpace / 2) + 'px'); } }); } createSpacers(); function matchTileMargins(tiles) { //tileContainers.each(function() { if (tiles.find(options.tiles).length > 1) { var totalSpace = $(this).find(options.tiles + '+' + options.tiles).first().offset().left - $(this).find(options.tiles).first().outerWidth() - $(this).find(options.tiles).first().offset().left; $(this).find(options.tiles).css('margin-top', (totalSpace / 2) + 'px').css('margin-bottom', (totalSpace / 2) + 'px'); } //}); } //matchTileMargins(justifier); $(window).bind('resize', $.proxy(function() { createSpacers(); }, this)); };
})(jQuery);
Flex Box Tiles - Script Codes
Flex Box Tiles - Script Codes
Home Page Home
Developer Richard
Username Ketziel
Uploaded August 02, 2022
Rating 3
Size 3,468 Kb
Views 52,624
Do you need developer help for Flex Box Tiles?

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!

Richard (Ketziel) Script Codes
Name
CSS Icon Collection
A Pen by Richard
CSSman
Colour Schemes
CSS Styled Select Box
CSS Plus Sign
Simple Responsive Image Grid
Responsive Image Grid with set Height
Atomic
Moon Orbit
Create amazing captions 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!