I have a simple flex container with 2 items; an image and the other is a small piece of descriptive text.
I'd like the image to grow and be as responsive as possible, but I also want there to be a max-height in place to avoid it growing too much. This causes a gap when the max-height is reached and the screen expands even further in width.
Is there a way to only have the container item fill the image as it grows so there are no gaps, or perhaps align the image to the left or the right side of the screen (self-align didn't appear to work)? I'm not sure what the answer to this is.
.container {
background-color: #FFEEDD;
display: flex;
flex-direction: row-reverse;
}
.container>.image {
flex-grow: 1;
}
.image img {
display: block;
max-width: 100%;
max-height: 300px;
}
.container>.text {
flex-grow: 2;
}
<div class="container">
<div class="image">
<img src="https://www.placecage.com/c/1500/2000">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
</div>
</div>
Solution #1
Get rid of
.container > .image {
flex-grow: 1;
}
Solution #2
.image{
text-align:right;
}
Solution #3 (You were trying to achieve this one)
All you needed was to add flex, direction to column and then align items to right by flex-end
.image{
display:flex;
flex-direction:column;
align-items:flex-end;
flex:1;
}
.container {
background-color: #FFEEDD;
display: flex;
flex-direction: row-reverse;
}
.image img {
display: block;
max-width: 100%;
max-height: 300px;
}
.container>.text {
flex-grow: 2;
}
<div class="container">
<div class="image">
<img src="https://www.placecage.com/c/1500/2000">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
</div>
</div>
If you want to align the text and image to the sides use justify-content:
.container {
background-color: #FFEEDD;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.image img {
display: block;
max-width: 100%;
max-height: 300px;
}
codepen
Related
Mockup:
The parent div's height is dynamic; it shrinks to fit the left-hand div (the one containing the text). I'd like the right-hand div (white background, with child img) to stretch vertically to fill the parent div. Unfortunately, height: 100% only works when the parent div's height is statically determined.
Here's what I've got right now:
.container {
background-color: lightgray
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: relative;
left: -10px;
height: 100% // XXX does not work
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
Answers to similar questions recommend using display: table-cell;, but then you have the issue of making the first (text) div stretch horizontally all the way, which is a different can of worms entirely.
Flexbox can do that.
.container {
background-color: lightgray;
display: flex;
border: 1px solid red;
width: 80%;
margin: 1em auto;
}
.blurb {
flex: 1;
padding: 2em;
}
.decoration {
display: flex;
align-items: center;
background-color: white;
margin-right: 1em;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
<div class="container">
<div class="blurb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores?
</div>
<div class="decoration">
✓
</div>
</div>
You can achieve it with position property. The parent container set to relative and child decoration set to absolute with top and bottom set to 0.
.container {
background-color: lightgray;
position: relative;
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
/* Align the content to center */
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
Applying width to an element that has been centered horizontally and vertically using flex loses the properties applied by flex
body {
margin: 0;
padding: 0;
height: 100vh;
}
header {
padding: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed lightblue;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
width: 200px; /* if comment this line the properties assigned by flex work properly */
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
ul li {
padding: 10px;
}
<header>
<nav>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
<button>Dark mode</button>
</header>
<main>
<h1>Lorem ipsum dolor.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
dolorem aliquam amet impedit.
</p>
</main>
What is the reason for this and how should this be implemented correctly?
Update
I get the desired result by modifying the html. I wrap the main content in a div and assign a fixed width to this div. Is it possible to do the same using only CSS?
body {
margin: 0;
padding: 0;
height: 100vh;
}
header {
padding: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed lightblue;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 1px dashed tomato;
}
main div {
width: 200px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
ul li {
padding: 10px;
}
<header>
<nav>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
<button>Dark mode</button>
</header>
<main>
<div>
<h1>Lorem ipsum dolor.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
dolorem aliquam amet impedit.
</p>
</div>
</main>
Thanks in advance
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
width: 200px;
margin:auto; // Just need to add margin auto
}
Instead of using fixed width you should use flex property.
like
.parent-element .child-element{ flex: 0 0 20em; }
flex is a shorthand property for it's ability to alter it's dimensions based on space.
You can look here for more details https://developer.mozilla.org/en-US/docs/Web/CSS/flex
I'd like to use CSS Grid. Something like this I think…
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
position: relative;
}
Set the viewport with display: flex and height: 100vh and add to the last element
flex-grow: 1
.viewportDiv {
display: flex;
flex-direction: column;
height: 100vh;
}
.div1{
background-color: yellow;
height: 100px;
}
.remainingDiv{
background-color: red;
flex-grow: 1;
}
<div class="viewportDiv">
<div class="div1"></div>
<div class="remainingDiv"></div>
</div>
Using CSS Grid you need to wrap the top two elements and the remaining space and then apply display: grid to that.
In other words, your diagram actually was the solution.
The wrapper should have a height of 100vh…
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
background: pink;
display: grid;
grid-template-rows: 100vh auto auto;
position: relative;
}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr;
}
header {
background: green;
padding: .25em;
}
nav {
background: orangered;
padding: .25em;
}
main {
background: rebeccapurple;
}
footer {
background: yellow;
}
.subfooter {
background: blue;
}
<div class="wrapper">
<header>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
</header>
<nav>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</nav>
<main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>
You can do it using flex.
.a {
width: 100%;
height: auto;
}
.remaining {
width: 100%;
flex-grow: 1;
}
.holder {
display: flex;
flex-direction: column;
height: 100%;
}
html,
body {
height: 100%;
}
HTML code:
<div class="holder">
<div class="a">
Content here
</div>
<div class="a">
Content here
</div>
<div class="remaining">
Content here
</div>
</div>
I have an image on the right side item of a flex container. As you can see in the codepen, there is a gap when expanding the screen (caused by the max-width on the image, which is unavoidable).
However I'm just wanting to move that image to the extreme right-side, so the gap isn't as noticeable.
This needs to be friendly with IE11, and the image needs to be responsive. I would like to avoid using a float on the image if possible (would've thought there is a cleaner way of achieving this using flexbox)?
HTML:
<div class="container">
<div class="image">
<img src="http://www.stevensegallery.com/1000/1400">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
</div>
</div>
CSS:
.container {
background-color: red;
display: flex;
flex-direction: row-reverse;
}
.container > .image {
flex: 1 0 0%;
}
.image > img {
display: block;
max-width: 100%;
max-height: 300px;
}
.container > .text {
flex: 2 0 0%;
}
Codepen:
https://codepen.io/neilem/pen/zjpXKZ
You could use vertical-align instead display, then text-align:
.container {
background-color: red;
display: flex;
flex-direction: row-reverse;
}
.container > .image {
flex: 1 0 0%;
text-align:right;/* and here*/
}
.image > img {
vertical-align:top;/* here */
max-width: 100%;
max-height: 300px;
}
.container > .text {
flex: 2 0 0%;
/* and eventually */
margin:auto 0;
}
<div class="container">
<div class="image">
<img src="http://www.stevensegallery.com/1000/1400">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
</div>
</div>
Use justify-content property on container and remove flex properties form the flex-child. Your code will look like this. Hope the result is what you desired.
.container {
background-color: red;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.image > img {
display: block;
max-width: 100%;
max-height: 300px;
}
I want to align my button at the bottom right corner of my div. How can I do that?
Current css of div:
float: right;
width: 83%;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:625px;
overflow:auto;
You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.
To make the content div positioned, all position values that aren't static will work, but relative is the easiest since it doesn't change the divs positioning by itself.
So add position:relative; to the content div, remove the float from the button and add the following css to the button:
position: absolute;
right: 0;
bottom: 0;
CSS3 flexbox can also be used to align button at the bottom of parent element.
Required HTML:
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Necessary CSS:
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Screenshot:
Useful Resources:
Specs
MDN
CSS Tricks
* {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow);
font: 14px/18px Arial, sans-serif;
margin: 0;
}
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
padding: 10px;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
.container .btn-holder button {
padding: 10px 25px;
background: blue;
font-size: 16px;
border: none;
color: #fff;
}
<div class="container">
<p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Parent container has to have this:
position: relative;
Button itself has to have this:
position: relative;
bottom: 20px;
right: 20px;
or whatever you like
I have solved this using position fixed:
.button-corner {
position: fixed;
bottom: 20px;
right: 20px;
}
Goes to the right and can be used the same way for the left
.yourComponent
{
float: right;
bottom: 0;
}