I am trying to achieve the following solution with css flexbox:
I have create a Plunkr at https://plnkr.co/edit/TbJIdOrJLtDfczno4Kpu?p=preview which shows what I currently have.
The grid row has a fixed height (class grid-row in Plunkr)
The red container should autofit the height (article in Plunkr)
The header and footer have a fixed height (header and footer in Plunkr)
The image should autofit the remaining space and is set as a background image (Picture in Plunkr)
Whatever I try, the image does autofit the height of the grid-row. Does someone see what I am doing wrong?
My HTML
<div class="grid-row">
<article>
<header>
Header text
</header>
<picture class="image">
</picture>
<footer>
footer text
</footer>
</article>
</div>
My CSS
.grid-row {
background: orange;
height: 200px;
}
.image {
background-image: url('http://lorempixel.com/400/200/sports/5/');
background-size: cover;
flex: auto;
}
article {
display: flex;
flex-direction: column;
}
The problem was that you didn't extend the flexbox styling up/down through the structure.
.grid-row {
background: orange;
height: 200px;
display: flex;
flex-direction: column;
}
.image {
background-image: url('http://lorempixel.com/400/200/sports/5/');
background-size: cover;
flex: 1; /* remaining height of article */
}
article {
display: flex;
flex-direction: column;
flex: 1; /* 100% height of row */
}
header {
background: red;
}
footer {
background: green;
}
<div class="grid-row">
<article>
<header>
Header text
</header>
<div class="image"></div>
<footer>
footer text
</footer>
</article>
</div>
Related
I'm trying to create a Flexbox setup comprised of two div elements which are both taking up 50% of the width of the screen equally.
The left side will have some text and the right side will have an image which will only fill the whole of it's 50% of the width, shrinking larger images down if necessary.
What's the best way to achieve this? I'm fairly new to Flexbox.
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
You can make the .image position: relative and set the width of the image to 100%:
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
/* make the parent position relative */
position: relative;
}
.image img {
/* make the width of the image equal to the parent width */
width: 100%;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
is there a way to have footer beign fixed to the bottom of the screen (viewpor) without using position:fixed property? I'm asking that because on safari fixed positioning causes some troubles and I was wondering if I can do it different way.
Just in case: I want footer to stay at the bottom of the VIEWPORT (not page) even if page is scrolled down.
Thanks.
I would personally look at CSS Grid, e.g.:
html,
body {
width: 100%;
height: 100%;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
<html>
<body>
<article>
<header>Header goes here
</header>
<main>Main content goes here
</main>
<footer>Footer goes here
</footer>
</article>
</body>
</html>
Flexbox is also an option, e.g.:
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 100px;
background-color: blue;
}
main {
flex: 1 0 auto;
}
footer {
height: 20px;
background-color: blue;
}
<div class="container">
<header>Header goes here</header>
<main class="content">Main content goes here</main>
<footer>Footer goes here</footer>
</div>
How I can make responsive flexbox?
So I use flexbox and two divs, one for leftside and one for right side.
Screen is like splitted, left side is image and right side info and inputs.
But left side isn't responsive if ajax loads more data, then white space is coming under the image.
My HTML:
<div class="forny-container">
<div class="forny-inner">
<div class="forny-two-pane">
<div></div> <!-- form div -->
<div></div> <!-- image div -->
</div>
</div>
</div>
My CSS:
.fo-container {
display: block;
align-items: center;
height:100%;
}
.fo-inner {
display: block;
height: 100%;
width: 100%;
}
.fo-two-pane {
height: 100%;
display: flex;
flex-direction: row-reverse;
}
.fo-two-pane > div {
flex: 1;
}
.fo-two-pane > div:first-child {
display: flex;
align-items: center;
background: white;
}
.fo-two-pane > div:last-child {
background: url('http://getwallpapers.com/wallpaper/full/9/9/0/722477-best-barber-wallpapers-1920x1080-samsung-galaxy.jpg') center center no-repeat
hsla(31, 80%, 93%, 1);
display: none;
}
If ajax loads more data or error messages into form div then white space is coming under the image:
What is going wrong?
I guess this should solve your problem. Here the working code.
.flex-container {
display: flex;
}
.image-selector {
width: 50%;
}
.left {
flex: 1;
background: lightblue;
text-align: center;
}
.right {
flex: 1;
background: lightpink;
}
.right h1 {
text-align: center;
}
.content {
margin-left: 20px;
}
<div class="flex-container">
<div class="left">
<h1>Left</h1>
<img class="image-selector" src="https://agentpekka.com/wp-content/uploads/2018/11/AP_MVM_Apple_2x-640x854.jpg" alt="image">
</div>
<div class="right">
<h1>Right</h1>
<div class="content">
<h2>Heading</h2>
<h3>Subheading</h3>
<h4>Somecontent</h4>
<lable>Name:</lable>
<input type="text" placeholder="name">
<p>description goes here, some more content</p>
</div>
</div>
</div>
Click for Codepen link
Additionally, you will need to use Media Queries for handling different screen sizes and different view ports.
Using flex, I would like to display an adaptive mosaic of Videos and Pictures, so each time I will add a new video or picture, the Tile will auto adjust.
Here is an exemple of what I m looking for:
[NOTE]: all the Tiles are the same width and height :)
Here is the HTML code:
[NOTE]: I didnt find how to make work flex on StackOverflow.
.flex-container {
display: flex;
background-color: Green;
flex-wrap: wrap;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 10;
}
.flex-container > div {
background-color: pink;
height:100%;
}
.flex-container > div > div.image {
background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
background-position: center right;
background-size: cover;
width:100%;
height:100%;
}
<div class="flex-container">
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="video">
<video src="http://link.to.video.mp4" autoplay loop muted></video>
</div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
</div>
So In the wrap flex-container, I have "image" div where the Image is in Background. And "video" div.
I found the way the auto adjust the image, but I dont how to do the same for the video.
Did you find a way to auto adjust video in wrap container?
Thanks.
Your flexbox code is okay (by default, the flex direction is by row, and it wraps on multiple lines to give the mosaic effect). The main problem is the position property in the main container. I removed the fixed position property, along with the associated containers.
/* Main Container */
.flex-container {
display: flex;
/* flex-direction: row; <-- Value by default */
flex-wrap: wrap;
width: 100%;
z-index: 10;
background-color: green;
}
I´ve also removed the height on both the main container and the direct children. As for the heights of the <div> with the .image class, i replaced the percentage value with a vh value. Let's define the element in the mosaic taking the full height of the viewport with the value 100vh.
/* Image Container */
.flex-container > div > div.image {
background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
background-position: center right;
background-size: cover;
width:100%;
height:100vh; /* <-- Height is full height of the viewport */
}
Let´s tackle the video issue. Maintaining the conditions in the HTML code, I've defined CSS for both the video container and the video element, Both will take the same width and height as the <div> elements with the .image class (100% width, 100vh height).
To adjust the video to take the entire size of the container, in it I used the object-fit property, with the value fill.
/* Video Container */
.flex-container > div > div.video {
width: 100%;
height: 100vh;
}
/* Video Element */
.flex-container > div > div.video video {
width: 100%;
height: 100vh;
object-fit: fill; /* <-- The video fills the entire video container */
}
Code Snippet
The mosaic is in action in the snippet below. Note that:
I added margin zero and padding zero to the entire page for aesthetic reasons.
The video elements feature a sample MP4 video.
Your original code has four mosaic elements, the snippet below has six. Along with the four original elements, there are two more. You can play with it and see the mosaic adjusts itself with the present elements.
* {
margin: 0;
padding:0;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
width: 100%;
z-index: 10;
background-color: green;
}
.flex-container > div {
background-color: pink;
}
.flex-container > div > div.image {
background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
background-position: center right;
background-size: cover;
width:100%;
height:100vh;
}
.flex-container > div > div.video {
width: 100%;
height: 100vh;
}
.flex-container > div > div.video video {
width: 100%;
height: 100vh;
object-fit: fill;
}
<div class="flex-container">
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="video">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop muted></video>
</div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="video">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop muted></video>
</div>
</div>
</div>
I have a div that uses the background-image attribute with background-size set to cover. Within the <div> that contains the background image, I have a <div> that contains a text block and a <div> that contains an image.
I am trying to vertically align the two <div>s within the background image.
I have code (below) that vertically aligns the <div>s relative to each other but not within the background image. I understand that my code does not work because the vertical alignment needs to happen at the bg class level but I can't figure out how to make it work.
I have the following HTML
<div class="bg">
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6">
<h4 class="text-center">Zack Gallinger has an MBA from Rotman School of Management. He also runs The 10 and 3, a Canadian data journalism site.</h4>
</div>
<div class="col-xs-6">
<img src="http://www.lucidwebgrouptest3.com/Images/Zack.jpg" class="img-circle">
</div>
</div>
</div>
</div>
and CSS
body,
html {
height: 100%;
}
.bg {
background-image:
url("http://www.lucidwebgrouptest3.com/Images/Background.jpg");
height: 60%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
h4 {
color: white;
}
The code is also on CodePen.
You need to add a height to container and row, so they match the bg
.container {
height: 100%;
}
.vertical-align {
height: 100%;
display: flex;
flex-direction: row;
}
Updated codepen