Flexbox padding between items but not edges

Flexbox padding between items but not edges - css

I have a basic flexbox implementation like this
.holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 500px;
background: wheat;
}
.col img {
max-width: 100%;
}
.col {
width: 20%;
float: left;
text-align: center;
}
<div class="holder">
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
I am trying to add some padding in between each of the items but not at the edges.
Is flexbox the best solution for this and does anybody have an example they can point me at?

You can use the flex-basis property where you set the initial width using the calc() function:
.holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 500px;
background: wheat;
}
.col img {
max-width: 100%;
}
.col {
/*width: 20%;*/
/*float: left; not necessary*/
flex-basis: calc(20% - 5px);
text-align: center;
}
/* addition, if desired */
img {
display: block; /* removes bottom margin/whitespace; "vertical-align: bottom" does the same */
}
<div class="holder">
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>

For flex box it is pretty easy. Just make the correct width for the items and set justify-content property of container to space-between. Make sure the sum of widths of items is less than 100% width of container.

Related

CSS vertically space even divs in IE 11

I was creating a layout which worked in the latest updated browsers (Firefox, Chrome, ...) and then opened the layout in IE 11 and saw a difference. My layout in IE looks like this:
But in every other tested browser the space on the right sided divs is evenly between them, which means that the third div stays on the bottom, while the second divs is right in the middle. I can't get it working in IE 11 and hoped that someone from here has a good advice.
https://jsfiddle.net/1gq2cj3f/2/
<article class="col-12 content-wrapper">
<div class="row content-wrapper-materials">
<div class="col-12 col-lg-6 materials-sectors">
<div class="card materials-sectors-general">
<div class="row no-gutters">
<div class="col-12">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="568px" height="430px">
</a>
</div>
<div class="card-img-overlay">
<h3 class="card-title">
Allgemein </h3>
</div>
</header>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 materials-sectors">
<div class="materials-sectors-specific">
<div class="card specific-construction">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-healthcare">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-ict">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
.content-wrapper > div {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding-top: 8rem;
padding-bottom: 8rem;
}
.card > * {
flex: 0 0 auto;
}
.materials-sectors .card-header {
height: 100%;
padding: 0;
border-bottom: 0;
background-color: rgba(242, 241, 241, 1) !important;
}
.materials-sectors .card-image {
height: 100%;
}
.materials-sectors .card-img-top {
-o-object-fit: cover;
object-fit: cover;
}
.materials-sectors-general .card-img-overlay {
bottom: 2rem;
padding: 0.75rem;
}
.materials-sectors .card-img-overlay {
background-color: rgba(255, 255, 255, 0.25);
top: auto;
}
.card-img-overlay > h3 {
font-size: 1rem;
margin-bottom: 0;
}
.materials-sectors-specific {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.materials-sectors-specific > .card {
height: 100%;
}
.materials-sectors-specific .card-image {
display: block;
}
.materials-sectors-specific > div:nth-of-type(2) {
margin-top: 1rem;
margin-bottom: 1rem;
}

How to reverse boxes in a row below row with two boxes using flexbox?

I want to make a different boxes in a row: one - 33% width, second - 66% width. In a row below this I want to make same sized boxes but in reverse position like below on the picture:
Can't use every time new row with row-reverse style because client wants edit boxes in Wordpress using ACF Repeater, so it should be done only by CSS.
.row {
display: flex;
flex-wrap: wrap;
}
.box {
height: 100px;
margin-bottom: 10px;
}
.box:nth-child(even) {
flex: 0 0 66.666%;
max-width: 66.666%;
}
.box:nth-child(odd) {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.box__item {
height: 100%;
border: 1px solid #000;
margin: 15px;
}
<div class='row'>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
</div>

You can do with nth-child()
.row {
display: flex;
flex-wrap: wrap;
}
.box {
height: 100px;
margin-bottom: 10px;
}
.box:nth-child(4n),
.box:nth-child(4n-3){
flex: 0 0 66.666%;
max-width: 66.666%;
}
.box:nth-child(4n-1),
.box:nth-child(4n-2){
flex: 0 0 33.333%;
max-width: 33.333%;
}
.box__item {
height: 100%;
border: 1px solid #000;
margin: 15px;
}
<div class='row'>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
<div class='box'>
<div class='box__item'> </div>
</div>
</div>

Single column gallery with flexbox with certain divs split in two

I am making use of a gallery which represents a column containing either one or two <div> elements spanning across the entire width. The columns containing multiple <div> elements also contain images with different height and width properties. I would like these columns to be the same height and then fill the width as much as possible whenever there is extra space between them.
I would use a flexbox <div> element with a fixed width and a flex-wrap property. The <div> elements that are to span the entire width have a property max-width: 100%. A row with multiple items are inside a container <div> element which spans and then each in another box <div> element. I could get the two on the same lines, but since they vary in sizes I would not want each image to be 50% width, because then the empty space is above and below an item instead of between them.
I have tried tinkering with flex-grow, flex-shrink and flex-basis, however none of these seem ever to be exact. I also considered switching the <div> elements with two items to flex-direction: column and then wrap these. This however did not work for me.
.column {
width: 600px;
display: flex;
flex-wrap: wrap;
}
.smallContain {
min-width: 100%;
display: flex;
align-content: space-between;
}
.smallBox {
flex: 1 1 50%;
}
.largeBox {
min-width: 100%;
}
img {
max-width: 100%;
}
<body>
<div id="container">
<div class="column">
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#">
</div>
<div class="box smallBox">
<img src="#">
</div>
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
</div>
</div>
</body>
(Within the example above, the .imgS class refer to small images and .imgL class refer to large images)
Here's an example of what I'm hoping to get it to look like.

your question is a bit hard to understand, even so I gave it a try, maybe what your looking is something like this?
.grid {
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.grid .item {
max-height: 400px;
padding: 5px;
}
.grid .item.smallBox {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
.grid .item.smallBox img {
object-fit: cover;
object-position: center;
}
.grid .item.largeBox {
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.grid .item img {
height: 100%;
width: 100%;
}
<div class="grid">
<div class="item smallBox">
<img src="http://placeholder.pics/svg/280x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/280x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1920x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/480x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/250x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/250x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/480x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/500x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/150x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
</div>
Hope it helps, good luck.

Nested, centered, CSS grid column appears off the screen in the negative X axis, even with "overflow-x: scroll"

The requirement here is to display a series of nested, centered CSS grid items. We're rendering something like a hierarchical tree, with the head node on top, then second level nodes, third level nodes, and so on.
The problem is that later levels run off the div in the negative and positive X-axis directions.
Setting overflow-x: scroll solves the problem only for the positive X-axis direction. That is to say, you can scroll to the right, but not to the left.
The example below is a greatly simplified example of the real problem I'm trying to address. The red element on the 3rd level is off the page in the negative X-axis. You can scroll to the right, but not the left.
What can be done to make it so the entire tree, and all nodes, are able to be scrolled to?
Code follows(Link to JS Fiddle.):
#tree {
overflow-x: scroll;
}
.flex-col {
display: flex;
flex-direction: column;
align-items: center;
}
.grid {
display: grid;
}
.content {
width: 300px;
border-radius: 5px;
background-color: blue;
color: white
}
<div id="tree" class="flex-col">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1;">
<div class="content" style="background-color: red;">** This is off the screen **</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1">
<div class="content">Content</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
</div>
</div>
</div>
</div>
</div>

You can create an extra wrapper inside the tree element which will be an inline flexbox container so that it takes as much space as its contents. Use text-align: center to center the tree when there is no scroll - see demo below:
#tree {
overflow-x: auto; /* overflow horizontally here */
text-align: center; /* align horizontally */
}
#tree > .flex-col {
display: inline-flex; /* inline flex container */
text-align: initial; /* reset text align to default left */
}
.flex-col {
display: flex;
flex-direction: column;
align-items: center;
}
.grid {
display: grid;
}
.content {
width: 300px;
border-radius: 5px;
background-color: blue;
color: white
}
<div id="tree">
<div class="flex-col"> <!-- <-- extra wrapper -->
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1;">
<div class="content" style="background-color: red;">** This is off the screen **</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1">
<div class="content">Content</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
</div>
</div>
</div>
</div>
</div>
</div>

You need to make sure that the grid elements don't expand wider than their container.
To resolve this, you can set max-width: 100% on .grid:
#tree {
overflow-x: scroll;
}
.flex-col {
display: flex;
flex-direction: column;
align-items: center;
}
.grid {
display: grid;
max-width: 100%;
}
.content {
width: 300px;
border-radius: 5px;
background-color: blue;
color: white
}
<div id="tree" class="flex-col">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1;">
<div class="content" style="background-color: red;">** This is off the screen **</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
<div class="grid">
<div class="flex-col" style="grid-column: 1">
<div class="content">Content</div>
</div>
<div class="flex-col" style="grid-column: 2">
<div class="content">Content</div>
</div>
</div>
</div>
</div>
</div>

Center Div scroll

In my code,
Within one container Three blocks will be there. one freezes on the left and one freezes on the right and the other will scroll in between these two divs. Just like modern grids. But I don't want to use the grid.
I have tried, but the center block is not getting the Horizontal scroll.
I want no breakage of the center block, instead, it should scroll horizontally.
* {
box-sizing: border-box;
}
.container {
width: 100%;
overflow: auto;
white-space: nowrap
}
.scroll-center {
width: auto;
overflow: auto;
display: block;
white-space: nowrap
}
.row {
float: left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
<div class="container">
<div class="row">
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
<div class="scroll-center">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>

You probably need to add width to your container. Right now it's set to 100% so it will not size beyond the browser window. Instead you could do something like this:
.container {
overflow: auto;
white-space: nowrap;
width:2000px;
}
I realize that you may need to change this value dynamically but hopefully this gets you started
Example:http://codepen.io/nilestanner/pen/jAjbdK

Try with For example:
css:
* {
box-sizing: border-box;
}
.left, .center, .right{
float:left
}
.center {
width:400px;
overflow: scroll;
display: block;
white-space: nowrap
}
#center-scroll{
width:2000px;
}
.center .row{
display:inline-block;
width:33%;
}
.center .row .cell{
min-width:100%;
}
.row{
float:left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
HTML
<div class="container">
<div class="left">
<div class="row" >
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
</div>
<div class="center">
<div id="center-scroll">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Flexbox padding between items but not edges - css

For flex box it is pretty easy. Just make the correct width for the items and set justify-content property of container to space-between. Make sure the sum of widths of items is less than 100% width of container.

Related

CSS vertically space even divs in IE 11

How to reverse boxes in a row below row with two boxes using flexbox?

Single column gallery with flexbox with certain divs split in two

Nested, centered, CSS grid column appears off the screen in the negative X axis, even with "overflow-x: scroll"

Center Div scroll

Categories

Resources