I want to make equal gap for the children of flexbox. I used margin-right zero for each child, then applied the margin right back on the last child. But the margin right somehow doesn't applied. You can see after you scrolled to the end of the child.
see demo below
.flex {
display: flex;
background: pink;
width: 80px;
overflow: auto;
}
.item {
min-width: 20px;
height: 20px;
background: black;
margin: 8px;
margin-right: 0;
}
.item:last-child {
margin-right: 4px;
}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
add another parent div and give overflow for parent div. For .flex class apply display:inline-flex; then it will works
.flex-parent{
overflow: auto;
width: 80px;
}
.flex {
display: flex;
background: pink;
min-width:100%;
float:left;
}
.flex-parent{
overflow: auto;
width: 80px;
}
.flex {
display: inline-flex;
background: pink;
/*min-width:100%;
float:left;*/
}
.item {
min-width: 20px;
height: 20px;
background: black;
margin: 8px;
margin-right: 0;
}
.item:last-child {
margin-right: 4px;
}
<div class="flex-parent">
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
.flex {
display: flex;
background: pink;
width: 200px;
overflow: auto;
justify-content: space-between;
}
.item {
min-width: 20px;
height: 20px;
background: black;
}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Related
I'm trying to apply a gradient mask on the right side of a horizontal scrollbar to indicate that the list scrolls horizontally. I've created a gradient-layer as my mask, however the mask moves horizontally with the navigation items when scrolled. I want the mask to stay fixed as the user scrolls through the navigation, but don't want to position it 'fixed' because I need the mask to be contained within the width and height of the navigation container. But I'm not sure how to achieve this effect. Thanks for the help!
.navigation{
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
background-color: black;
white-space: nowrap;
position: relative;
width: 100%;
}
.navigation::after {
content: "";
position: absolute;
height: 100%;
right: 0;
background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%);
width: 15%;
}
.item {
flex: 0 0 auto;
height: 100px;
width: 100px;
background-color: blue;
margin-right: 10px;
}
}
<div class = "navigation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Use position:sticky
.navigation {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
background-color: black;
white-space: nowrap;
margin:0 20px;
}
.navigation::after {
content: "";
display:block;
position: sticky;
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), red 85%);
width: 15%;
margin-left:-15%; /* same a width to not take any space */
flex-shrink:0; /* this is important to keep the width:15% */
}
.item {
flex: 0 0 auto;
height: 100px;
width: 100px;
background-color: blue;
margin-right: 10px;
}
.navigation .item:last-child {
margin-right:auto;
}
<div class="navigation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Why not just use position: fixed while applying the same height the .item class has?
.navigation {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
background-color: black;
white-space: nowrap;
position: relative;
width: 100%;
}
.navigation::after {
content: "";
position: fixed;
height: 100px;
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), red 85%);
width: 15%;
}
.item {
flex: 0 0 auto;
height: 100px;
width: 100px;
background-color: blue;
margin-right: 10px;
}
<div class="navigation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 4 years ago.
Hello! Can you help me? I'm trying to do two column layout with same spacing between items in same column.
.flex {
margin: 0;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
}
.item {
width: 45%;
height: 200px;
margin-bottom: 10px;
background-color: navy;
}
.item:nth-child(1) {
height: 210px;
}
.item:nth-child(2) {
height: 500px;
}
.item:nth-child(3) {
height: 360px;
}
.item:nth-child(4) {
height: 400px;
}
.item:nth-child(5) {
height: 150px;
}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Thanks for every good advice & your help!
You could use column-count instead of flexbox. In this situation, there's no need to implement a flexible box layout. You're not trying to maintain identical sizes or adjust for any odd alignment.
.flex
{
margin: 0;
padding-left: 0;
list-style: none;
column-count: 2;
column-gap: 10px;
}
.item{
height: 200px;
margin-bottom: 10px;
background-color: navy;
break-inside: avoid;
}
.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Here's a way to use percentages for the column gap. It uses 0px column-gap and a negative margin on the container to adjust for the excess margins on the left and right.
.flex
{
margin: 0;
padding-left: 0;
list-style: none;
column-count: 2;
column-gap: 0;
margin: 0 -1.25%;
}
.item{
height: 200px;
margin-bottom: 10px;
background-color: navy;
break-inside: avoid;
margin: 0 2.5% 5%;
}
.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
So I want to float some div's center, orignally I was using float: left which gave me this look http://i.imgur.com/wfHacch.png after reading other answers I see that I can not do that, one of the suggestions made was to use margin: 0 auto; when I used this it made everything simply stack in a line down the center, as per this image http://i.imgur.com/xyixrdj.png
I am trying to force the floating div's to be stacked uniformly centered. Which would also adjust to the stack down the line in lower screensizes,
How best am I to do this?
So here is my CSS at the moment
.container {
overflow: hidden;
width: 100%;
height: 100%;
}
.item {
float: left;
max-width: 500px;
width: 100%;
padding: 10px;
height: 100%;
}
button {
width: 33%;
height: 100%;
padding: 20px;
background: orange;
border: 1;
border-radius: 10px;
border: 1px;
border-radius: 02px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
And my HTML
<div class="container orders">
<div class="item">
<button class="ready">
/*content*/
</button>
</div>
</div
You should use inline-block
div {
display: inline-block
}
By default divs are block elements.
You can use flexbox: https://jsfiddle.net/BradChelly/m9d3jepz/
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
width: 30%;
height: 100px;
margin-bottom: 20px;
border:1px solid red;
}
#media only screen and (max-width: 500px) {
.item {
width: 45%;
}
}
#media only screen and (max-width: 300px) {
.item {
width: 100%;
}
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I don't know what your code is but If I were you I would try wrap those div's in another div with display: inline-block and clearfix. And then give parent text-align: center. End code should look something like that:
.parent{
text-align: center;
}
.parent .container{
display: inline-block;
width: 340px;
zoom: 1;
}
.parent .container:after{
content: "";
display: table;
clear: both;
}
.parent .container:before{
content: "";
display: table;
}
.parent .container .element{
display: block;
float: left;
width: 100px;
bordeR: 1px solid #000000;
height: 50px;
margin: 5px
}
<div class="parent">
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
if you want center a div so you have to remove float left you can add text-align center i parent div and add display inline-block in child div like this
.parent{
width:100%;
float:left;
text-align:center;
}
.child{
width:100px;
background:#f00;
display:inline-block;
}
<div class="parent">
<div class="child">Some text here</div>
<div class="child">Some text here</div>
<div class="child">Some text here</div>
<div class="child">Some text here</div>
</div>
I want to vertically align the items to the bottom of the container. The difficulty is coming from the fact that .container is floated left, I didn't find a solution so far.
.container {
width: 40px;
height: 250px;
background: #aaa;
float: left; /* cannot be removed */
}
.item {
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
If you always have 4 items and everything has a fixed height, you can simply do the math and set some top margin on the first item:
.item:first-child {
margin-top: 90px; /* 250-40x40 */
}
You can also use flexbox:
.container {
width: 40px;
height: 250px;
background: #aaa;
float: left;
/* new */
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.item {
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I have the following requirement.
The green colored parent width will be varying depending on device width. I need all the boxes to be in the center of the parent.
I have tried the following things already, but it didnt help me.
Trial 1
Parent {text-align:center} box {display:inline-block}.
This resulted in following output
Trial 2
Parent {text-align:center} box{float:left}.
This resulted in following output
Trial 3
Parent {display:flex} box -> justify-around & justify-between also didn't work.
.parent {
text-align: center;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
<div class="parent">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Any help on this will be appreciated.
Without Javascript this very hard using floats &/or inline-block.
Flexbox offers some hope but even then some creativity is required.
Essentially, provided the maximum number of elements "per row" is known you can create a required number of invisible elements which can be ustilised in conjunction with justify-content:center to acheieve the last line appearance you require by essentially pushing the last line content back over to the left.
Codepen Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
text-align: center;
border: 1px solid grey;
width: 80%;
max-width: 800px;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background: red;
}
.balancer {
height: 0;
width: 100px;
margin: 0 10px;
visibility: hidden;
}
<div class="parent">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="balancer"></div>
<div class="balancer"></div>
<div class="balancer"></div>
<div class="balancer"></div>
</div>
Got it working by using jQuery and adding a #wrapper.
All you've got to do is calculate how many items will fit on one row. Then you set the wrapper to the exact width that is needed to fit these items.
I hoped it could be done in pure CSS, but as far as I know there is no Math.floor() equivalent for CSS.
Example:
function fitItemsOnRow() {
var windowWidth = $(window).width();
var itemWidth = $(".item").outerWidth(true);
var itemAmount = Math.floor((windowWidth / itemWidth));
if(itemAmount > $(".item").length) {
/* Set the maximum amount of items */
itemAmount = $(".item").length;
}
var rowWidth = itemWidth * itemAmount;
$("#wrapper").width(rowWidth);
}
$(window).resize(function() {
/* Responsive */
fitItemsOnRow();
});
$(document).ready(function() {
fitItemsOnRow();
});
body {
margin: 0px;
}
#parent {
background: #75DB3C;
min-width: 100vw;
min-height: 100vh;
text-align: center;
}
#wrapper {
display: inline-block;
text-align: left;
font-size: 0px; /* Removes default margin */
}
.item {
display: inline-block;
margin: 12px;
width: 100px;
height: 100px;
background: #0B56A9;
}
<div id="parent">
<div id="wrapper">
<!-- A wrapper is necessary to center the items -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
You can do this with css selector "nth-of-type(n)"
<div class="parent">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
and css here
.parent
{
display: block;
width: 980px;
padding: 10px 50px;
background: green;
box-sizing: border-box;
}
.parent::after
{
content: '';
display: block;
clear: both;
}
.item
{
float: left;
width: 24%;
margin-right: 1.25%;
margin-bottom: 1.25%;
/*
note
you may need min height , height or overflow:hidden
*/
}
.item:nth-of-type(4n)
{
float: right;
margin-right: 0;
}