I have nested flexboxes with some images inside, it looks good in Chrome, but in IE you can see the borders on the flex-item-wrapper are not flush against the bottom of the image. By the way, in the layout I will sometimes have several flex-row with many pictures.
.flex-list {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
}
.flex-item-wrapper {
width: 100%;
border: 1px solid green;
}
.flex-item {
height: 100%;
width: 100%;
border: 1px solid blue;
}
.picture {
width: 100%;
}
<div class="flex-list">
<div class="flex-row">
<div class="flex-item-wrapper">
<div class="flex-item">
<a href='#'>
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</a>
</div>
</div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
</div>
</div>
This seems to be working:
.flex-row {
display: flex;
flex: 0 0 auto; /*added*/
}
or
.flex-row {
display: flex;
height: 100%; /*added*/
}
See simplified demo:
.flex-list {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex: 0 0 auto;
}
.flex-item {
flex: 1;
border: 1px solid blue;
}
.picture {
width: 100%;
height: auto;
}
<div class="flex-list">
<div class="flex-row">
<div class="flex-item">
<a href='#'>
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</a>
</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</div>
The problem seems due to the nesting flexbox. This fixes it:
.flex-row {
width: 100%;
align-self: flex-start;
}
.flex-list {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
width: 100%;
align-self: flex-start;
}
.flex-item-wrapper {
width: 100%;
border: 1px solid green;
}
.flex-item {
height: 100%;
width: 100%;
border: 1px solid blue;
}
.picture {
width: 100%;
}
<div>
<div class="flex-list">
<div class="flex-row">
<div class="flex-item-wrapper">
<div class="flex-item">
<a href='#'>
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</a>
</div>
</div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
</div>
</div>
<div></div>
</div>
Related
I'm trying to make messages shows from bottom to top, like on whatsapp, you will see the latest messages and it will start from bottom and for older messages you need to scroll up.
I'm using display: flex; and justify-content: flex-end; which seems to display correctly (from bottom).
But the problem is that I can't scroll to top, it does not let me.
How can I fix this?
body {
background-color: #000;
height: 100%;
width: 100%;
}
.box {
width: 800px;
height: 200px;
background-color: lightblue;
}
.container {
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
background: red;
}
.message {
margin: 10px;
}
.message.player {
background-color: #ccc
}
.message.me {
background-color: lightgreen;
}
<body>
<div class="box">
<div class="container">
<div class="header">
<span>Yesterday</span>
</div>
<div class="message player">
<span>Message from friend 1</span>
</div>
<div class="message player">
<span>Message from friend 2</span>
</div>
<div class="message player">
<span>Message from friend 3</span>
</div>
<div class="header">
<span>Today</span>
</div>
<div class="message me">
<span>Message from me 1</span>
</div>
<div class="message me">
<span>Message from me 2</span>
</div>
<div class="message me">
<span>Message from me 3</span>
</div>
</div>
</div>
</body>
There is a hack how to do it with CSS with flex-direction: column-reverse for a wrapper, which I attached as an example. But it probably would be better to make it explicitly with JavaScript using Window.scroll() method.
.test {
width: 30px;
height: 30px;
}
.test:nth-of-type(2n + 1) {
background: yellow;
}
.wrapper {
height: 300px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
<div class="wrapper">
<div class="div">
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<div class="test">6</div>
<div class="test">7</div>
<div class="test">8</div>
<div class="test">9</div>
<div class="test">10</div>
<div class="test">11</div>
<div class="test">12</div>
<div class="test">13</div>
<div class="test">14</div>
<div class="test">15</div>
<div class="test">16</div>
<div class="test">17</div>
<div class="test">18</div>
<div class="test">19</div>
<div class="test">20</div>
</div>
</div>
It is because you are forcing your .container div to be of fixed height (i.e 100% of its parent). Remove the height: 100%; and overflow-y: auto; from .container and set overflow-y: auto; on your .box div.
body {
background-color: #000;
height: 100%;
width: 100%;
}
.box {
width: 800px;
height: 200px;
background-color: lightblue;
overflow-y: auto;
}
.container {
width: 100%;
/* height: 100%;
overflow-y: auto; */
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
background: red;
}
.message {
margin: 10px;
}
.message.player {
background-color: #ccc
}
.message.me {
background-color: lightgreen;
}
I am having trouble laying out my items in a gallery. I would like to be able to display an image in a horizontal or vertical format and have it fit within a fixed 300px x 300px box and align to the bottom of the box. I would like the "attribution" to line up with the right edge of the image. Here is a picture of the desired layout.
Picture of desired layout
This is the html:
.gallery {
display:flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
display: flex;
background: green;
}
.gallery_description {
height:auto;
width:100%;
}
.image_attribution {
display:flex;
flex-direction:column;
align-items:flex-end;
}
.image_square {
width: 100%;
height: 100%;
background: black;
display:flex;
flex-direction:column;
align-items:flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
}
.image {
height:100%;
background: green;
width:
}
.image_contain {
width: 100%;
height: 100%;
object-fit:contain;
object-position: bottom;
}
.attribution {
float:right;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I am unable to make the image fit within the box. Ive tried use "object-fit:contain" but to no avail. I would be grateful for any help you can offer.
Update: the code is almost working. The last item is to make the attribution align with edge of the image. align attribution to edge of image Here is the latest version of the code in Codepen.
https://codepen.io/acrossky/pen/KKoNdPX
Maybe something like this:
.gallery {
display: flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
background: green;
}
.gallery_description {
width: 100%;
height: auto;
}
.image_attribution {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.image_square {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
justify-content: center;
}
.image {
height: 100%;
width: 100%;
}
.image_contain {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
.attribution {
display: block;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I have this mockup, there are some nested containers. some of the link-class have multiple elements (par and ref) and I want them to display next to each other if there's space, but responsively move them below each other when total width gets smaller.
It works somewhat, but I expect (want) the link-element containing two childs to return to the same width as the link-element with one single child as it wraps.
For some reason, it remains wider than the single-child ones.
Any hints appreciated!
Code:
let name = 'world';
:global(body) {
margin: 0;
padding: 0
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: gray;
}
.Container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: lightblue;
padding: 3px
}
.linkContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3px;
background-color: salmon;
}
.par {
width: 80vw;
max-width: 300px;
background-color: red
}
.links {
display: flex;
flex-flow: row wrap;
padding: 3px;
background-color: orange
}
.ref {
background-color: olive;
width: 30vw;
max-width: 100px
}
.item {
width: 80vw;
max-width: 300px;
background-color: steelblue
}
<div class="main">
<div class="Container">
<div class="item">
header
</div>
<div class="linkContainer">
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="Container">
<div class="item">
another header
</div>
<div class="linkContainer">
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you could simply add a max-width:300px; to .links and have the box in size but then you couldn't have the desired stacking effect you wanted so i went a bit further and with the help of css variables and media queries and adding a class .single to single .pars which didn't have a .ref after them, i came up with this:
:root {
--ref-size: 100px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: gray;
}
.Container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: lightblue;
padding: 3px
}
.links {
min-width: 300px;
display: flex;
flex-flow: row wrap;
padding: 3px;
background-color: orange;
}
.par {
width: calc(100% - var(--ref-size));
background-color: red;
}
.ref {
background-color: olive;
width: var(--ref-size);
}
.item {
width: 80vw;
max-width: 300px;
background-color: steelblue
}
#media all and (max-width:300px){
.par{
width: 100%;
}
}
#media all and (min-width: 300px){
.par.single{
width: 100%;
}
}
<div class="main">
<div class="Container">
<div class="item links">
header
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="item links">
another header
</div>
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
</div>
</div>
I know that this question has already been asked several times but none of them seem to work for me or they're "too complicated" for my example.
I have three divs. Two of them are aligned vertically. The other one should be next to them and should have the same hight as the other two together.
It should look like this:
This is what I have so far:
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Have a look at my fiddle
It's better to wrap your right side div(.info) with a parent div.
Try this one , it could help
.wrapper{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid red;
background-color: #fffdea;
width: 100%;
padding: 10px;
}
.icon {
border: 1px solid lightgreen;
width: 30%;
}
.right-set {
width: 75%;
}
.info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
border: 1px solid aqua;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="right-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
try this
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
.wrapper {
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon {
border: 1px solid lightgreen;
width: 130px;
margin: 5px;
}
.info-set {
width: 100%;
}
.info {
border: 1px solid aqua;
display: flex;
justify-content: space-between;
margin: 5px 5px 5px 0;
}
Something needs to have a height set, either the wrapper or the icon. I also set height 50% of the info divs and changed box-sizing to border box for the contained elements.
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
height: 130px;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
box-sizing: border-box;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
height: 50%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Can be achieved using Flexbox and wrapping the info divs in a container.
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-container">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
CSS :
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon{
border: 1px solid lightgreen;
width: 30%;
min-height: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
}
.info-container{
display: flex;
width: 70%;
box-sizing: border-box;
flex-direction: column;
}
.info{
border: 1px solid aqua;
}
You could also attempt to use css Grid.
.wrapper {
display: grid;
/*1fr unit is one fraction of the remaining space available. So I have divided the space into two tracks. One longer than the other*/
grid-template-columns: 1fr 5fr;
}
.icon {
background: #a03;
/*Run the icon div in two rows height but take one track width as the rest*/
grid-row: span 2;
}
.info {
background: #bccd03;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/cxuxgy0u/
You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.
What you want to do can be achieved with Flexbox.
article {
display: flex;
align-items: center;
}
article > div + div {
margin-left: 1rem;
}
article > div {
flex-shrink: 0;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
article > div:nth-child(2) {
height: 6rem;
width: 6rem;
}
<article>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
</article>
You might want to read more about Flexbox on MDN.
A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: flex;
align-items: center;
}
.circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
height: 100px;
border-radius: 50%;
margin: 20px;
border: 1px solid #000;
}
.big-circle {
flex-basis: 300px;
height: 300px;
}
<div class="circles-container">
<div class="circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
https://jsfiddle.net/cxuxgy0u/7/
Try this:
HTML
<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>
CSS
.container {
display:flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }
Uses flexbox and is the simplest way to achieve what you want.
Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/
Hope it helps!
I think your problem is found in the styling.
For each circle, you need to remove the style
display:table-cell
vertical-align: middle;
and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have
line-height:100px //this brings the text to the middle of the circle vertically.
Then also, you need to increase the border-radius from 50% to 100%
border-radius:100%;
Therefore, your css will not look like this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 100%;
text-align: center;
line-height:100px;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
line-height:300px;
}
This should help you.
Flexbox:
container {
display: flex;
justify-content: center;
}
If you want space between the pictures, use:
margin-left:
or
margin-right:
try this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: flex;
}
.circle {
padding: 40px 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell {
}
.big-circle {
padding: 150px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>