This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed last year.
How can the height of the image be relative to the height of the elements on the left?
I'm trying to create the following layout:
What I tried
I'm trying to achieve this with flexbox. My html looks like this. I have display:flex on the container <div class="split">. That container houses two children containers: <div class="intro__primary"> and <div class="intro__secondary">. The first has an h1, p and a. The second the img.
I gave both children a width of 48%, and I want my image to occupy as much vertical space as possible, but not more than the height of <div class="intro__primary">.
HTML
<section class="intro">
<div class="split">
<div class="intro__primary">
<h1></h1>
<p></p>
<a class="btn"></a>
</div>
<div class="intro__secondary">
<img>
</div>
</div>
CSS
.split {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.intro__primary {
width: 48%;
align-self: flex-start;
}
.intro__secondary {
width: 48%;
height: 100%;
align-self: flex-end;
}
.intro__secondary > img {
max-width: 100%;
height: 100%;
}
The code above results in an image that has a way larger height than the container with the text on the left. I played a lot with all the properties but can't fix it. What am I overlooking?
.split {
max-height: 100px;
display: flex;
}
.intro__secondary {
max-height: 100%;
}
.intro__secondary img {
height: 100%;
width: 100%;
object-fit: cover; /* you can also use object-fit: contain; */
}
<section class="intro">
<div class="split">
<div class="intro__primary">
<h1>Heading</h1>
<p>paragraph</p>
<a class="btn"></a>
</div>
<div class="intro__secondary">
<img src="https://source.unsplash.com/random" alt="random-image">
</div>
</div>
</section>
Related
Hi I am creating a website and I am trying to align a picture and some text vertically, but I am not being able to do this and the picture is only taking 100% space of the website, this is the code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
The website is divided into 3 columns and I am putting the content on the middle one.
Shouldn't the display flex align them vertically? Why is it not working? Thank you in advance!
You need to set align-items:center on flex parent in order to vertically center its children. Check this for more details about flex-container, and this for more general info about flexbox
You can add justify-content:center for horizontal alignment.
Since you are using display: flex to the content div, add just the property align-items:center and your text will be centred vertically:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
align-items:center;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
In order to make it work, try to think with me ok? In order to you understand what is happening here:
First of all if you have a parent div its children should be one bellow one another
Your first step is to set the div to have flex: 1, flex check it out this website to learn more.
now set the items to be side by side with display: flex
set the same container with justify-content: center and align-items:center
and if you wish to align the div to the middle of your page, try this: margin: 0 auto
Here is where the magic happens: flex-direction: column, check the documentation flex-direction
I am trying to place 4 divs over a background image that would keep relative position and size as the browser is resized.
Here is the desired layout:
I have a big background (pink) that is placed with:
#screenFiller {
width: 100vw;
height: 100vh;
background-size: contain;
background-image: url("myimg.png");
background-repeat: no-repeat;
}
There are 4 main divs (red boxes). The two tops ones (side by side) contain a button each (blue boxes) with text (white squiggly lines) above the buttons but still in the red. I am positioning the divs next to each other using:
.flex {
display: flex;
justify-content: Left;
flex: none;
}
The main problem I am having is with the two top divs in that one is not keeping its height (it shrinks to content). I do understand that I will need to handle reducing the text size using a media query or something.
The stripped-down HTML looks like:
<div class="flex ">
<div class="boxme">
<div>
<p class="boldtext">Blha blah balh</p>
<div style="margin:10%;">
<button type="button" class="bigbut gborder5" onclick="window.location.href=''">Syart New</button>
</div>
</div>
</div>
<div class="boxme marl100">
<div>
<p class="boldtext">blah</p>
<div>
<button type="button" class="bigbut gborder5" onclick="window.location.href=''">Start New</button>
</div>
</div>
</div>
</div>
With boxme being:
.boxme {
background-color: white;
width: 25%;
height: 10%;
text-align: center;
}
Finally, all four divs are wrapped in a div with the following css
.relpos {
position: relative;
top: 36%;
left: 4%;
width: 85%
}
Please feel free to take me on an alternate path.
Bootstrap is available if that helps but currently, everything is just HTML and CSS.
Thank you in advanced for any consideration.
Normally, you never want to have fixed width, height, margin or paddings.
For your question, your flex values should be to put your content in the bottom left corner:
.container {
display: flex;
align-items: flex-end;
flex-direction: row; // default
}
Here is the full example that can be run as code snippet:
body {
height: 100vh;
}
body {
background-color: #fcf;
}
.container {
display: flex;
align-items: flex-end;
gap: 20px;
height: 100%;
padding: 20px;
}
.container>div {
background-color: #faa;
padding: 10px;
}
<div class="container">
<div>
<p>Text</p>
<button>Cick</button>
</div>
<div>
<p>Text</p>
<button>Cick</button>
</div>
</div>
I would strongly advise you to learn the fundamentals of html and css from other resources.
I have a div with two contents: an image (on top) and text (on bottom).
Height of image plus height of the text is bigger than the height of the parent.
I want an image to shrink, so the whole text will be visible.
So - now it looks like this:
And I want it to look like this:
How to achieve this?
I tried it with display: flex and flex-shrink or flex-grow, but it's not working.
Solution with flex will be much appreciated :)
Here's a codepen with an example:
https://codepen.io/anon/pen/zQXyLb
And here's code used:
<html>
<head></head>
<body style="background: yellow;">
<div style="
width: 150px;
height: 150px;
background: #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
">
<div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png">
</div>
<div>
<div>Here i have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
</body>
</html>
Instead of img tag try div with background-image.
flex: is short form of: flex-grow, flex-shrink, flex-basis.
0 0 auto means that element will take just as much space as needed.
1 1 auto means that element will take all available space — so image takes box size minus text size. And text is always visible.
.box {
display: flex;
flex-direction: column;
margin-bottom: 20px;
width: 150px;
height: 150px;
background: #ddd;
}
.image {
flex: 1 1 auto;
background: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png) 0 0 no-repeat;
background-size: contain;
}
.text {
flex: 0 0 auto;
}
<div class="box">
<div class="image"></div>
<div class="text">
<div>Here I have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
<div class="box">
<div class="image"></div>
<div class="text">
<div>Here I have small text</div>
</div>
</div>
You can also keep image in the HTMl if you inbricate flex boxes to allow img container to shrink and img understand max-height:100%;
body {
background-color: #a3d5d3;
}
[class],
[class]>div {
display: flex;
flex-direction: column;
overflow: hidden;
}
img {
max-height: 100%;
margin-right: auto;
}
[class]>div[id] {
flex-grow: 1;
flex-shrink: 0;
}
<div class style="
width: 150px;
height: 150px;
background: #ddd;
">
<div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png">
</div>
<div id>
<div>Here i have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
Resize the image using css.
img{
max-width:50px;
}
The above code should make the image flexible and allow it to be smaller.
Also you can put variable height to the parent div, i.e.
<div style="
width: 150px;
max-height: 250px; //added this part
background: #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
">
But this way the image will stay large but the parent's height will increase. Allowing the text to appear in the enlarged div.
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/
I've read many posts on flexbox but still have an issue that bugs me.
I want to have a sticky footer using flexbox as per this guide.
But then, inside my page content I would like to have as many nested divs I like and have them taking the same height of the parent.
The problem is, setting height: 100% on each child (as I would do in a non-flexbox scenario) works differently when flexbox is enabled. This results in the children getting more height (overflow the parent).
To make this more clear here's a codepen without flexbox
and a codepen with flexbox
You can see in the flexbox scenario the footer gets the green bakground even if I don't want that.
HTML:
<div class="sticky-footer-container">
<div class="sticky-footer-content">
<div class="page-container">
<div class="main-menu">
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
Some footer content
</div>
</div>
SCSS:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
background: silver;
padding: 0;
margin: 0;
}
.sticky-footer-container {
height: 100%;
display: flex;
flex-direction: column;
.sticky-footer-content {
height: 100%;
background: blue;
flex: 1;
div {
height: 100%;
}
.main-menu-selection {
height: 50%;
}
}
}
.some-other-class {
background: green;
}
In order to solve this, ANY nested div has to become a flex-container ?
In other words, is there any way to "stop the flex propagation" at some point of the tree, so all the divs gets the parent height without overflow?
display:flexbox is not really a valid value :)
you need to set height as well and eventually inherit it from html :
.sticky-footer-container {
display: flex;
flex-direction: column;
}
.sticky-footer-content {
flex: 1;
}
/* let's inherit some height to pull the footer down */
html,
body,
.sticky-footer-container {
height: 100%;
margin: 0;
}
.sticky-footer {
display: flex;/* flex item can be flexboxes as well */
background: turquoise;
align-items: center;
justify-content: center;
min-height: 3em;
}
<div class="sticky-footer-container">
<div class="sticky-footer-content">
<div class="page-container">
<div class="main-menu">
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
Here my footer
</div>
</div>