I am trying to create a sticky central element with flex-direction column-reverse. Using flex-direction column works fine. Is this possible with column-reverse?
.parent {
display: flex;
overflow-y: scroll;
/* works with flex-direction: column; */
flex-direction: column-reverse;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.child, .sticky {
width: 100%;
height: 40px;
background: gold;
border-bottom: 1px solid #555;
flex-shrink: 0;
}
.sticky {
background: crimson;
position: sticky;
top: 0;
bottom: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="sticky"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Can you please check the below code? Hope it will work for you. We just add the one div .child-parent in the parent div and set flex properties according to solve your problem.
.parent {
border: 1px solid #ccc;
flex-direction: row;
}
.child-parent {
overflow-y: scroll;
height: 200px;
display: flex;
display: -webkit-flex;
flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
position: relative;
}
.child,
.sticky {
width: 100%;
height: 40px;
background: gold;
border-bottom: 1px solid #555;
flex-shrink: 0;
flex-direction: row;
}
.sticky {
width: 100%;
background: crimson;
position: sticky;
position: -webkit-sticky;
bottom: 0;
top: 0;
display: flex;
z-index: 1;
flex-shrink: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="parent">
<div class="child-parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="sticky"></div>
<div class="child">11</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
<div class="child">17</div>
<div class="child">18</div>
<div class="child">19</div>
</div>
</div>
</body>
</html>
Related
I want to add a different number of items per row in CSS.
.parent {
display: flex;
flex-wrap:wrap:
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
So, I want to create the next logic:
on the first row to have 4 items
on second 3 items
on third 1 item
How to do this?
Your Answer
.parent {
text-align: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div> <br>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div> <br>
<div class="child"></div>
</div>
You can do like this:
With break elements
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.break {
flex-basis: 100%;
height: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="break"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="break"></div>
<div class="child"></div>
</div>
With pseudo-elements and nth-child
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.break {
flex-basis: 100%;
height: 0;
}
.parent::before, .parent::after {
content: '';
width: 100%;
order: 1;
}
.child:nth-child(n + 5) {
order: 1;
}
.child:nth-child(n + 8) {
order: 2;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
This can be done by using :nth-child() selector.
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.child:nth-child(9), .child:nth-child(5) {
flex-basis: 100%;
height: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Or can be done by using line-break class.
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.line-break {
flex-basis: 100%;
height: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="line-break"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="line-break"></div>
<div class="child"></div>
</div>
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.
}
What I want to achieve is something like this:
.parent {
min-width: 64px;
width: auto;
height: 64px;
background-color: purple;
display: inline-block;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
The key that I was able to make the parents grow as their children grow is by using display: inline-block for the parent, but to make them align vertically I have to use an extra wrapper for each parent, or placing a <br> after each parent like this:
<div class="parent">
<div class="child"></div>
</div><br>
<div class="parent">
<div class="child"></div>
</div><br>
<div class="parent">
<div class="child"></div>
</div><br>
But in doing so there is always a tiny gap that I couldn't remove between the parents. Is there a way to remove the wrapper to make the structure simpler like this to work (to have the same effect as the first example):
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
Use float and clear after each element:
.parent {
min-width: 64px;
height: 64px;
background-color: purple;
float:left;
clear:left;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
Or use min-content in the width. Simply pay attention to the support: https://caniuse.com/#feat=intrinsic-width
.parent {
min-width: 64px;
height: 64px;
background-color: purple;
width:min-content;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
Wrap all your parents in a wrapper and use flexbox.
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.parent {
min-width: 64px;
width: auto;
height: 64px;
background-color: purple;
display: inline-block;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
adding font-size:0 for inline element parent here .wrapper will remove the gap!
If container has fixed width and height, is it possible to move child elements to next line until there is enough space vertically and then, when there it no more vertical space, make last line child element take width space.
It is hard to verbally expain what I want to achieve, so here is JsFiddle of what I currently have: JsFiddle
.parent {
width: 400px;
height: 300px;
background: white;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.child {
width: 160px;
height: 80px;
margin: 4px;
background: red;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Image of what I would like to achieve:
You can have something similar if you use a column direction. In this case, the overflow will occur on the right and not on the bottom:
.parent {
width: 400px;
height: 300px;
background: white;
border: 1px solid black;
display: flex;
flex-direction:column;
justify-content:flex-end;
flex-wrap: wrap;
overflow: hidden;
}
.child {
width: 160px;
height: 80px;
margin: 4px;
background: red;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I have elements wrapped into a parent div, and they're all floated to left. The parent element has overflow: scroll and when the parent become thinner than the children, i don't want the children to break line, but the parent to overflow them horizontally.
I've discovered that i can do this by using: display: inline-block for the children to behave text-like and then, set the parent to white-space: nowrap. This way, they will not break.
But i want a solution with the children floated. Can someone help me?
Working example
HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS
.parent{
padding: 3px;
width: 100%;
height: 200px;
background-color: green;
overflow: scroll;
/*does the trick*/
white-space: nowrap;
}
.child{
display: inline-block;
height: 190px;
width: 80px;
background-color: gray;
margin-left: 10px;
}
[edit] - Since Paulie asked in the comments, i've got to say that no, they don't have to be floated for working. I know this. But I want to know if there is another way to accomplish that and I think that there is no better place for this but the SO community
Flexbox can do that and it doesn't even need the white-space:nowrap.
.parent {
padding: 3px;
height: 200px;
background-color: green;
overflow: auto; /* or scroll */
display: flex;
}
.child {
height: 190px;
flex: 0 0 80px;
background-color: gray;
margin-left: 10px;
}
.parent {
padding: 3px;
height: 100px;
background-color: green;
overflow: scroll;
display: flex;
}
.child {
height: 90px;
flex: 0 0 80px;
background-color: gray;
margin-left: 10px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
JSfiddle Demo
display: table does do that too, though flex is a more appropriate way to do layout than table, unless you need it to work on for example IE8/9, which flex doesn't, but then again, your inline-block is more appropriate than table
.parent{
padding: 3px;
max-width: 100%;
height: 200px;
background-color: green;
overflow: scroll;
display: table;
}
.child{
display: table-cell;
height: 190px;
min-width: 80px;
background-color: gray;
padding-left: 10px;
border: 1px solid white
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>