Flexbox Column Stretch

Developer
Lauren
Size
2,487 Kb
Views
20,240
  1. Flexbox Column Stretch Previews
  2. Flexbox Column Stretch HTML Codes
  3. Flexbox Column Stretch CSS Codes

How do I make an flexbox column stretch?

What is a flexbox column stretch? How do you make a flexbox column stretch? This script and codes were developed by Lauren on 18 September 2022, Sunday.

Flexbox Column Stretch Previews
IQ Test

Flexbox Column Stretch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Column Stretch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="column"> <div class="tile image-tile"> <img src="http://lorempixel.com/600/400/city/3/" /> </div> <div class="tile"> <h1>Featured Film</h1> <div class="content"> <h2>The Good, the Bad, and the Ugly</h2> <p>Sergio Leone's classic "Spaghetti Western" about three men competing for a cache of buried Confederate gold.</p> <button>Read More</button> </div> </div> </div> <div class="column"> <div class="tile"> <h1>About the Festival</h1> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla vehicula turpis, ut lacinia massa egestas id. Praesent a malesuada erat. Nullam finibus pellentesque pellentesque. Aliquam in dolor sed velit ornare placerat in quis lorem. Duis vel tincidunt turpis, at volutpat nisi. Aliquam convallis tristique ullamcorper. Integer suscipit sed urna non volutpat.</p> </div> </div> <div class="tile image-tile"> <img src="http://lorempixel.com/600/400/city/4/" /> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flexbox Column Stretch - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Audiowide);
* { margin: 0px; padding: 0px; box-sizing: border-box;
}
html, body { background: #EEE; font: 14px Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; border: none; width: 100%; height: 100%;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 50%;
}
.tile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; width: 100%;
}
.tile h1 { -ms-flex-negative: 0; flex-shrink: 0; display: block; padding: 20px 0px; background: #0E4452; color: #FAFAFA; font: 16px 'Audiowide', cursive; text-transform: uppercase; text-align: center; width: 140px;
}
.tile .content { padding: 20px; background: #FAFAFA;
}
.tile .content h2 { margin-bottom: 8px; padding-bottom: 8px; font: 14px 'Audiowide', cursive; text-transform: uppercase; border-bottom: 1px #25AA72 solid;
}
.tile .content button { display: block; margin: 20px 0px 0px auto; padding: 8px 20px; background: #25AA72; color: #FAFAFA; font: 12px 'Audiowide', cursive; text-transform: uppercase; border: none; cursor: pointer;
}
.image-tile { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-preferred-size: calc(50vw * 2/3); flex-basis: calc(50vw * 2/3); /* Calculate the height of the image based on the width of the view port and the height-width ratio of the image */ height: calc(50vw * 2/3);
}
.image-tile img { max-width: 100%;
}
Flexbox Column Stretch - Script Codes
Flexbox Column Stretch - Script Codes
Home Page Home
Developer Lauren
Username phantomesse
Uploaded September 18, 2022
Rating 3.5
Size 2,487 Kb
Views 20,240
Do you need developer help for Flexbox Column Stretch?

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!

Lauren (phantomesse) Script Codes
Name
Mondrian Generator
URL Parameter Extractor
Thumbnail Example
Messages Inbox
Hover Buttons
Magnifying Glass Icon
Hover Map
Which Language Spinner
Dissolving Block Art
Multiple Choice Quiz
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!