So I have been working with flex box recently and have the hand of positioning but justification is still being difficult.
I want X images to sit side by side in flex boxes, and then wrap when the page gets too small for them. This all works fine. However what isn't happening is the images inside the flex box aren't centering horizontally. I have tried every combo of justify-content, align-items, align-self etc to get it to work but I appear to be missing something.
here is the code
body {
background: black;
}
.general_peer_request_display {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
}
.general_peer_request_box {
flex: 1 1 90px;
padding: 5px;
align-items: center;
justify-content: center;
}
.general_peer_request_image {
width: 80px;
height: 80px;
border-radius: 50% 50% 50% 50%;
border: 3px double white;
background: blue;
}
.general_peer_request_text {
opacity: 0;
padding: 3px 5px 3px 0px;
text-align: left;
padding: 15px 5px 15px 5px;
width: 80px;
}
.general_peer_request_text:hover {
opacity: 1;
color: rgba(255, 255, 255, 1);
text-shadow: 1px 1px white;
cursor: pointer;
}
<div class="general_peer_request_display">
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
</div>
Thank you.
You simply need to add margin:auto inside the boxes OR make their container display:flex (what you forgot)
body {
background: black;
}
.general_peer_request_display {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
}
.general_peer_request_box {
flex: 1 1 90px;
padding: 5px;
/* Or this instead of margin auto
display:flex;
align-items: center;
justify-content: center;
*/
}
.general_peer_request_image {
width: 80px;
height: 80px;
border-radius: 50% 50% 50% 50%;
border: 3px double white;
background: blue;
margin:auto; /*Added this*/
}
.general_peer_request_text {
opacity: 0;
padding: 3px 5px 3px 0px;
text-align: left;
padding: 15px 5px 15px 5px;
width: 80px;
}
.general_peer_request_text:hover {
opacity: 1;
color: rgba(255, 255, 255, 1);
text-shadow: 1px 1px white;
cursor: pointer;
}
<div class="general_peer_request_display">
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
<div class="general_peer_request_box">
<div class="general_peer_request_image" style="background: url('') center no-repeat;">
<div class="general_peer_request_text">Neo</div>
</div>
</div>
</div>
Related
I want the max width of the "circlecontainer" to be 300px.
but when the browser exceeds 1200px in width, I want my 4 child divs (with max width 300px) to stay centered in the browser.
They are currently positioned on the left side.
Here is my html and css.
any tips would be appreciated :)
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
text-align: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .66);
}
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
Just replace text-align: center; with justify-content: center; for .getstartedcirclescontainer.
HTML:
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
CSS:
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
justify-content: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.66);
}
Hello I'm pretty new to this & I'm trying to figure out how to scale and clip these images to fit into each grid square without having a border...
I also don't know if this is an effective way to set up my images. I'd like to have a different image for each square, but how it's set up now I'd have to make a new .box .inner# for each one. If there is a better way to structure this that'd be really helpful.
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
You might do it like this:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
I am not fully sure if this will fix your problem but maybe take off the margin in your .box class in your css file.
not enough reputation yet so click this link
Instead of having your margin at 5px change it to 0px and see if that helps.
As for the different images you just need to create a new class for each image an link a new image to that class, go back and link it up like you have with the two previous.
I would like to have one image on the left and two on the right stacked on top of one another. As the footprint shrinks, horizontally, I would like the images to become small too, maintaining their aspect ratios. When I currently do it the images maintain their same size and are pushed off the left side of the page.
I am using bootstrap 3.* right now. But I would be curious to know how to do it with flexbox.
codepen
* {
box-sizing: border-box;
}
.content {
background-color: rgba(0, 0, 0, 0.3);
padding: 10px;
}
.row {
display: flex;
flex-flow: column wrap-reverse;
justify-content: center;
align-items: center;
max-width: 600px;
height: 40px;
background-color: rgba(0, 0, 0, .2);
}
.cell {
text-align: center;
display: flex;
align-items: center;
min-height: 50%;
padding-top: 5px;
padding-bottom: 5px;
}
.ordered3 {
order: 3;
flex: 2;
padding-right: 10px;
border-right: rgba(0, 0, 0, 0.3) solid 3px;
}
.ordered2 {
order: 2;
flex: 1;
}
.ordered1 {
order: 1;
flex: 1;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height: 100%
}
<div class="content">
<div class="row">
<div class="cell ordered3">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg" />
</div>
<div class="cell ordered2">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg" />
</div>
<div class="cell ordered1">
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg" />
</div>
</div>
</div>
Check my codeopen. If it's not what you want, please clarify your issue.
* {
box-sizing: border-box;
}
.content {
background-color: #f9f9f9;
border: 1px solid #ececec;
padding: 10px;
}
.row {
display: flex;
align-items: center;
}
.cell {
padding-top: 5px;
padding-bottom: 5px;
}
img {
width: 100%;
display: block;
max-width: 300px;
}
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
</div>
</div>
I have a flex container with individual child containers within it. Within those child containers, I have a simple content div and a title div. What I am trying to do is centre the title text vertically, but keep it at the top of the box. Then, I am trying to centre the content div in the box, both horizontally and vertically.
I have sort of figured it out (but knowing me this code is a load of drivel), but now when the viewport size decreases, the content text (with overflow: hidden) does not hide when the size decreases. I have figured out that this is down to the margin being set to 0, but I need it to be set to 0 in order for the bloody content div to center!
Any and all help offered is much appreciated. Here is a link to the jsfiddle that I created in order to help you visualise the problem. Change the size of the viewport and you'll see my issue, namely on the "Total cash amongst players" box.
http://jsfiddle.net/mpqbassm/
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
To stop the content from overflowing, overflow: hidden must be on the parent container of the element.
In this case, that would be any div with the class .flex-info.
Take a look at this in practice below.
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
overflow:hidden;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
</div>
I tried using the flexbox method, table method, and some other methods for vertically centering a div of unknown height, but my div is not getting centered correctly. I want the width of the centered div to be 50% of the window width or have a min-width of 200px.
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>
Using a flexbox, here's all the code you need:
HTML
<div class="container">
<div class="content">
<div class="title-class">Hello there</div>
</div>
</div>
CSS
html, body { height: 100%; }
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: violet;
height: 100%;
}
.content {
background-color: violet;
width: 50%;
text-align: center;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
DEMO
As an alternative, here's the table method:
How to Center Elements Vertically, Horizontally or Both