I have 4 divs that I need to arrange properly but they have the same class name. I want to have a result like this > https://imgur.com/Bx5zu1i that is not changing when window is resized. I tried flexbox and I can't get the result I wanted. Thanks for the help
Edit: sorry I'm new to stackoverflow, here's the code below
<head>
<style>
.box {
background-color: yellow;
display: table-cell;
padding: 20px;
background-clip: content-box;
width: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box1 <br><br><br><br><br><br><br><br></p>
</div>
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box2 <br><br><br><br><br><br><br><br></p>
</div>
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box3 <br><br><br><br><br><br><br><br></p>
</div>
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box4 <br><br><br><br><br><br><br><br></p>
</div>
</div>
</body>
</html>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid #000;
padding: 0 15px;
}
.child {
margin: 15px auto 0 auto;
width: 31%;
height: 160px;
box-sizing: border-box;
border: 1px solid #000;
}
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
Now in your css
.myclass{
width: 31.33%;
padding: 1%;
}
.myclass:nth-child(4) {
margin: 0 auto.
}
Related
I want div.line with border black like below code to have full height in container scroll.
When there is an element that is too long, for example, line number 4 the borders will be shortened, with no height until the end.
Is there a way for the elements inside the scroll container to always be the same height as the tallest element?
Thanks, everyone!
.container {
display: flex;
align-items: stretch;
height: 300px;
overflow: auto;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
If I get you right, then
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll flex</title>
<style>
.another-container {
height: 300px;
overflow-y: scroll;
}
.container {
display: flex;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
</style>
</head>
<body>
<div class="another-container">
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
</div>
</body>
</html>
Your solution does not work as intended because you set the height of your flex container explicitly, as #XiaoGuang pointed out. None of flex items could be greater than the container itself. So first step is to remove the height property and let the flex container to become as tall as the tallest flex item. After that, if you still need scrolling, just add another container for that.
You should use grid in this case instead of flex. Take a look at comments in code for more details.
.container {
display: grid; /* change to grid */
grid-template-columns: repeat(4, 1fr); /* create 4 columns */
height: 300px;
overflow: auto;
}
.line {
width: calc(100% - 16px * 2); /* full width column */
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
Since your .line divs also contain an item, you need to make them flexboxs as well, and then make the item grow to the full height. Something like this:
.container {
display: flex;
align-items: stretch;
height: 300px;
overflow: auto;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
display: flex;
flex-direction: column;
}
.item {
background: blue;
color: white;
padding: 16px;
flex-grow: 1;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
And that's basically it.
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.
here is what I did so far
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px -16px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding: 0px 16px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
I have given a negative right margin for the wrapper to make it look like it's flowing from the right.
Once the last element is scrolled/reached I want it to look something like this
enter image description here
One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.
Updating few images that show what I'm really looking for
During scrolling
After scrolling till the last card
Try
.scroll-wrapper {
overflow: hidden;
margin: auto;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: auto;
}
I have found a fix and hope this help someone.
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding-right: 40px;
margin-right: -8px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
Please do answer if someone has a better solution!! Thanks
hey I'm new in Flexbox and I'm trying to get it as best as I can. However i faces a problem with some heights and orders, maybe some here could help out.
Note: Don't suggest using Grid/tables please.
this is what I have right now:
this is what I want to get:
html:
<div class="movie-container">
<div class="upper-container">
<div class="image">Image</div>
<div class="title">Title</div>
<div class="more">More</div>
</div>
<div class="lower-container">
<div class="runtime">Runtime</div>
<div class="description">Description</div>
<div class="director">Director</div>
</div>
</div>
css:
.movie-container{
display:flex;
flex-flow: column wrap;
}
.upper-container {
display: flex;
width:80%;
margin:0 auto;
flex-flow: raw wrap;
}
.upper-container div {
border: 1px solid black;
padding: 10px;
}
.lower-container {
display: flex;
width:80%;
margin:0 auto;
flex-flow: column wrap;
}
.lower-container div {
border: 1px solid black;
padding: 10px;
}
.image {
flex: 1;
}
.title {
flex: 3;
}
.more {
flex: 0.1;
}
.runtime{
}
.description{
}
.director{
}
Maybe other stuff need to be added beside flexbox I'm not sure, that's why I ask here. Any solution will be helpful!
If you change your HTML structure slightly you can accomplish this fairly easily:
<div class="movie-container">
<div class="upper-container">
<div class="image">Image</div>
<div class="side-container">
<div class="title">Title</div>
<div class="more">More</div>
<div class="runtime">Runtime</div>
<div class="description">Description</div>
</div>
</div>
<div class="lower-container">
<div class="director">Director</div>
</div>
</div>
JSFiddle
Flex isn't very good at stretching across multiple rows / columns like tables or Grid is, while you state you don't want that solution it is typically a better option in cases like this.
I find it easiest to work with flexbox on a row-by-row basis instead of using wrapping (although you can certainly do that too).
As a starting point, I think this snippet is what you're going for?
div {
flex: 1 1 auto;
}
.box {
border: 1px solid black;
}
.flex {
display: flex;
}
.image {
width: 120px;
flex: 0 0 auto;
}
.more {
flex: 0 0 auto;
}
<div class="flex upper">
<div class="box flex image">Image</div>
<div class="upper-detail">
<div class="flex title-container">
<div class="box title">Title</div>
<div class="box more">More</div>
</div>
<div class="box runetime">Runtime</div>
<div class="box director">Director</div>
</div>
</div>
<div class="box description">Description</div>
<div class="box other">Other stuff...</div>
Hope this helps.
.upper-container{
display: flex;
height: 200px;
}
.upper-left{
background: #ddd;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.upper-right{
flex: 3;
display: flex;
flex-direction: column;
height: 100%;
}
.title-more, .runtime, .director{
flex: 1;
border: 1px solid #222;
display: flex;
align-items: center;
}
.lower-container{
border: 1px solid #222;
padding: 10px;
}
.title-more{
justify-content: space-between;
}
.more-button{
height: 30px;
width: 100px;
border: 1px solid #333;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="movie-container">
<div class="upper-container">
<div class="upper-left">
Image
</div>
<div class="upper-right">
<div class="title-more">
<div class="title-container">
Title
</div>
<div class="more-button">
More
</div>
</div>
<div class="runtime">Runtime</div>
<div class="director">Director</div>
</div>
</div>
<div class="lower-container">
Description
</div>
</div>
The key is to add some divs and remove some others:
.movie-container *{padding:.5em;}
.upper-container {
display: flex;
padding:0;
}
.image {
border: 1px solid;
flex: 1 1 25%;
}
.tmrd{flex: 1 1 75%;padding:0}
.title-more {
display: flex;
padding:0;
}
.title{flex: 1 1 75%;border: 1px solid;}
.more{flex: 1 1 25%;border: 1px solid;}
.runtime,.description,.director{border: 1px solid;}
<div class="movie-container">
<div class="upper-container">
<div class="image">Image</div>
<div class="tmrd">
<div class="title-more">
<div class="title">Title</div>
<div class="more">More</div>
</div>
<div class="runtime">Runtime</div>
<div class="description">Description</div>
</div>
</div>
<div class="director">Director</div>
</div>
I am trying to align the footer at the bottom, leave the space at the top. but not works. any one help me to know the correct way?
.parent {
border: 1px solid red;
display: flex;
}
.child {
border: 1px solid green;
min-height: 100px;
flex: 1;
align-items:bottom;
}
.footer{
background:#808080;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
First of all, to align items to the bottom the correct way is align-items: flex-end;
I also declared display:flex; on .child, and gave it a width.
.parent {
border: 1px solid red;
display: flex;
}
.child {
border: 1px solid green;
min-height: 100px;
display: flex;
width: 33.333%;
align-items: flex-end;
}
.footer{
background:#808080;
width: 100%;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
In this example your .child also needs to have display: flex and .footer needs align-items: bottom.
Why? This is actually multiple nested flex layouts.
As per the code you have provided. This can be a possible solution.
.parent {
border: 1px solid red;
display: flex;
}
.child {
border: 1px solid green;
min-height: 100px;
flex: 1;
display: inline-flex;
align-items: flex-end;
flex-direction: row;
}
.footer {
display: inline-block;
width: 100%;
background:#808080;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
But in a more optimized way. Let me show you another sample:
.parent {
border: 1px solid red;
display: flex;
}
.child {
flex: 1;
border: 1px solid green;
min-height: 100px;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
background:#808080;
}
<div class="parent">
<div class="child">
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="content">Content</div>
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
If you don't want to change the HTML tags and use the same as in the question, you can go with the first solution. Otherwise, the second one will serve better.
Remove line-height from the .child and add height for the .parent.
Updated :
.parent {
border: 1px solid red;
display: flex;
align-items: flex-end;
height: 100px;
}
.child {
border: 1px solid green;
flex: 1;
align-items:bottom;
}
.footer{
background:#808080;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>