VerticallyAlign | FlexBoxes

Developer
Rich Wertz
Size
2,788 Kb
Views
4,048
  1. VerticallyAlign | FlexBoxes Previews
  2. VerticallyAlign | FlexBoxes HTML Codes
  3. VerticallyAlign | FlexBoxes CSS Codes

How do I make an verticallyalign | flexboxes?

Client needs a way to responsively display an image and description of the image. The table of images should be able to expand and contract responsively and display numbers of images in one row based on how much room there is on the page, but each row should also stack nicely.. What is a verticallyalign | flexboxes? How do you make a verticallyalign | flexboxes? This script and codes were developed by Rich Wertz on 19 January 2023, Thursday.

VerticallyAlign | FlexBoxes Previews
IQ Test

VerticallyAlign | FlexBoxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>VerticallyAlign | FlexBoxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="parent"> <div class="child"> <div class="wrapper"> <div class="sc commondesc"> Client Work </div> <div class="sc coinimg"> <img src="https://dummyimage.com/125x125/eee/ff9900.png" /> </div> <div class="sc coindesc">	This will work with Cyrilic text:<br/>ВЕЛИКАЯ ОТЕЧЕСТВЕННАЯ ВОЙНА 1941-1945 гг.<br />(The Great Patriotic War of 1941-1945)<br/>This text is in a box that is vertically aligned with the box to the left. </div> <br /> <div class="sc coinimg"> <img src="https://dummyimage.com/125x125/eee/ff9900.png" /> </div> <div class="sc coindesc">	his will work with Cyrilic text:<br/>ВЕЛИКАЯ ОТЕЧЕСТВЕННАЯ ВОЙНА 1941-1945 гг.<br />(The Great Patriotic War of 1941-1945)<br/>more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more </div> </div> </div> </div>
<div class="flex-grid"> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />Monument to the Defenders, Moscow<br />БИТВА ПОД МОСКВОЙ (Battle for Moscow)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />"Heroes of the Stalingrad Battle" Memorial, Volgograd<br /> СТАЛИНГРАДСКАЯ БИТВА (Battle of Stalingrad)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />Monument to the Defenders of Elkhotovo Gates<br />IБИТВА ЗА КАВКАЗ (Battle of Kavkaz)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />The Tank Fight Near Prokhorovka Village<br />КУРСКАЯ БИТВА (Battle of Kursk)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />National Museum of the History of the Great Patriotic War of 1941-1945 Memorial Complex, Kyiv<br />БИТВА ЗА ДНЕПР (Battle for Dnieper)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />"Victory" Monument, Kryvyi Rih<br />ДНЕПРОВСКО-КАРПАТСКАЯ ОПЕРАЦИЯ (Dnepr-Carpathian operation)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />Monument to the Soviet Soldier, Tallinn<br />ПРИБАЛТИЙСКАЯ ОПЕРАЦИЯ (Baltic Operation)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />Monument to the Soviet Soldier, Memorial Cemetery, Seelow Heights<br />БЕРЛИНСКАЯ ОПЕРАЦИЯ (Berlin Operation)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />Victory Monument on Hellert Hill, Budapest<br />БУДАПЕШТСКАЯ ОПЕРАЦИЯ (Budapest Operation)</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br />Monument to 1200 Soviet Guardsmen, Kaliningrad<br />ВОСТОЧНО-ПРУССКАЯ ОПЕРАЦИЯ (East-Prussian Operation)</div>
</div>
<div class="flex-grid"> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br /><br />Inscription: ()</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br /><br />Inscription: ()</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br /><br />Inscription: ()</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br /><br />Inscription: ()</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br /><br />Inscription: ()</div> <div class="col"><img src="https://dummyimage.com/125x125/eee/ff9900.png" /><br /><br />Inscription: ()</div>
</div>
</body>
</html>

VerticallyAlign | FlexBoxes - Script Codes CSS Codes

.parent { margin: 10px auto; border: 1px #000 solid; display: table; height: 400px; width: 80%;
}
.child { display: table-cell; vertical-align: middle; border: 1px red solid; margin: 0 auto; text-align: center;
}
.wrapper { border: 1px green solid; display: inline-block; max-width: 90%;
}
.sc { text-align: center; border: 1px #000 solid; padding: 5px; display: inline-block; vertical-align: middle;
}
.coinimg { width: 125px;
}
.coindesc { max-width: 50%;
}
.commondesc { min-width: 90%;
}
.coinimg, .coindesc, .commondesc { margin: 10px;
}
.flex-grid {	display: -webkit-box;	display: -webkit-flex;	display: -ms-flexbox;	display: flex;	margin: 0 auto;	flex-wrap: wrap;	width: 90%;
}
.flex-grid .col {	-webkit-box-flex: 1;	-webkit-flex: 1;	-ms-flex: 1;	flex: 1;	border: 1px #000 solid;	text-align: center;
}
.flex-grid-thirds {	display: -webkit-box;	display: -webkit-flex;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: justify;	-webkit-justify-content: space-between;	-ms-flex-pack: justify;	justify-content: space-between;
}
.flex-grid-thirds .col {	width: 32%;
} @media (max-width: 800px) {
.flex-grid, .flex-grid-thirds {	display: block;
}
.flex-grid .col, .flex-grid-thirds .col {	width: 100%;	margin: 0 0 5px 0;
}
}
.col {	background: orange;	padding: 20px;
}
VerticallyAlign | FlexBoxes - Script Codes
VerticallyAlign | FlexBoxes - Script Codes
Home Page Home
Developer Rich Wertz
Username richwertz
Uploaded January 19, 2023
Rating 3
Size 2,788 Kb
Views 4,048
Do you need developer help for VerticallyAlign | FlexBoxes?

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!

Rich Wertz (richwertz) Script Codes
Name
Loading Animation Example
Adaptive Background Colors
Animated Menu Effect
Color Palette Changer
Video-background
Transitioning Backgrounds
SCSS basics
Slide-Screen Navigation
A Pen by Rich Wertz
Reduce Navigation Interaction Voids
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!