Using Flexbox, I'm trying to achieve this:
But I'm instead reaching this point:
Here is what I've got so far (vendor prefixes omitted). If someone could help get this working well in either Firefox or Chrome, I'd very much appreciate it.
img {
max-width: 100%;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.item,
.img-wrapper {
align-items: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.img-wrapper {
flex-grow: 1;
flex-shrink: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 </p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>Text goes here</p>
</div>
</div>
</div>
The align-items property applies only to flex containers.
You have it applied to img-wrapper:
.item,
.img-wrapper {
align-items: center;
}
...but this element is not a flex container.
Since img-wrapper does not have display: flex or display: inline-flex applied, align-items is being ignored.
Try this:
.item,
.img-wrapper {
align-items: center;
display: flex;
}
.container {
display: flex;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.item,
.img-wrapper {
align-items: center;
display: flex;
}
img {
max-width: 100%;
}
.img-wrapper {
flex-grow: 1;
flex-shrink: 0;
}
.excerpt-wrapper > p {
margin: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
jsFiddle
And the only reason the text in the left column is vertically aligned in that location is because that happens to be where it meets the bottom margin of the photo.
If you want the text in the right column to be aligned in the same spot, make the top element an image or box equal in height to its cousin in the adjacent column.
.container {
display: flex;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.item,
.img-wrapper {
align-items: center;
display: flex;
}
img {
max-width: 100%;
}
.img-wrapper {
/* flex-grow: 1; */
flex-shrink: 0;
height: 269px;
width: 291px;
justify-content: center;
}
.excerpt-wrapper > p {
margin: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
jsFiddle
If you need the display to adapt to a variable images size, and don't have problems with the width of the container (that is, you can set a size for it beforehand , or at least a maximum widtyh that will be wide enough for the content)
The you can change the flex direction to row, reorder the items so that the images go first, and force a wrap at the end of the images:
.container {
display: flex;
flex-wrap: wrap;
}
.container:after {
content: "";
order: 15;
width: 9999px;
}
.container div {
width: 200px;
}
.img-wrapper {
order: 10;
text-align: center;
}
.excerpt-wrapper {
order: 20;
border-top: solid 1px red;
}
img {
max-width: 100%;
}
<div class="container">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 </p>
</div>
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>Text goes here</p>
</div>
</div>
Related
what i want to make is picture below
and i made it to this far, using stackflow.
but i could't understand about positioning boxes
even though found some infos.
what should i do next?
<!-- html -->
<div class="boxbox">
<div class="box1">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box2">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box3">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
</div>
<!-- css -->
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
This is one of simple approach for fix your layout.
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
img{
width:300px;
height:300px;
}
.box1,.box2{
width:50%
}
.box3{
width:50%;
margin:auto;
}
<div class="boxbox">
<div class="box1">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
<div class="boxbox">
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
Or using flex
.boxbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box1,
.box2,
.box3 {
flex-basis: 50%;
min-height: 100px;
}
img {
width: 300px;
height: 300px;
}
.box3 {
margin: auto;
}
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned.
I am trying to achieve this.
see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.
this is my code
<div class="wrapper">
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
.wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
here's the link to my jfiddle for a clearer picture.
https://jsfiddle.net/9ros2v4j/6/
Thanks to anyone that can explain.
.wrapper {
background: green;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.wrapper-inner {
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.square {
flex: 0 1 33.33%;
}
.square img {
width: 100%;
display: block;
}
.square-inner {
padding: 5px;
}
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
</div>
</div>
One requirement is for justify-content: flex-start which would place your last row as per your need.
The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.
Or
If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.
You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.
If you open the below example on a full page, you will be able to see the expected result.
Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.
.wrapper {
position: relative;
text-align: center;
height: auto;
background: #ff0000;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.squares {
background: #00ff00;
width: 30%;
height: 100px;
flex: 0 31.33%;
margin: 1%;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
<div class="wrapper">
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:
And here is a jsfiddle of this example that I set up with flexbox.
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?
Based on the comment regarding absolute positioning:
I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.
The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.
Like so:
#main {
max-width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.holder {
position: relative;
}
.column img {
display: block;
max-width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(255, 255, 255, 0.5);
width: 100%;
}
<div id="main">
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/300">
</div>
<div class="holder"> <img src="http://placekitten.com/200/300"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/400">
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/200">
<div class="caption">My Caption</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/280"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/250">
<div class="caption">My Caption</div>
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/400">
<div class="caption">Superduper long Caption In Here</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/220"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
</div>
fix image height and use "object-fit:cover;"
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
height:100px;
object-fit: cover;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
I'm trying to make 2 images span the whole height of an image beside it. Is there a flexbox way of doing so? I'm trying to use flexbox-direction: column but the problem I'm getting is that the 2 images span twice the image while I want them to fill the space of the single image.
https://jsfiddle.net/nLsa4oqc/
.wrapper {
display: flex;
}
.first {
flex: 1;
}
.second {
flex: 1;
display: flex;
flex-direction: column;
}
.second-a {
flex: 1;
}
.second-b {
flex: 1;
}
<div class="wrapper">
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<div class="second-a">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second-b">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
</div>
</div>
You can use flex property, like this:
fiddle
.wrapper {
display: flex;
}
.first {
flex: 2;
}
.second {
flex: 1;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
<div class="wrapper">
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<div class="second-a">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second-b">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
</div>
</div>
I have been trying to horizontally center these 3 items using flexbox, yet without success. They all need to be of the same width.
HTML:
<div id="contact_flex_container">
<div id="fb">
<img src="img/contact/fb.png" class="contact_img">
<h3>Title1</h3>
</div>
<div id="yt">
<img src="img/contact/yt.png" class="contact_img">
<h3>Title2</h3>
</div>
<div id="mail">
<img src="img/contact/mail.png" class="contact_img">
<h3>Title3</h3>
</div>
</div>
CSS:
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: space-around;
}
.contact_img {
width: 40px;
height: 40px;
}
#fb {
flex-basis: 0;
flex-grow: 1;
}
#yt {
flex-basis: 0;
flex-grow: 1;
}
#mail {
flex-basis: 0;
flex-grow: 1;
}
I have also tried setting margin-left and right to auto for each child, justify-content to center for the container, even combined with fixed width of the container in pixels, yet nothing seems to work. To be more specific, justify-content does not seem to work at all here, whatever value I put there. What am I missing or doing wrong?
The flex properties you are assigning to the flex-items make them all as large as they can be (in this case 33% of the container).
Just remove them, then change the parent to justify-content:center.
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: center
}
.contact_img {
width: 40px;
height: 40px;
}
#fb {} #yt {} #mail {}
<div id="contact_flex_container">
<div id="fb">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title1</h3>
</div>
<div id="yt">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title2</h3>
</div>
<div id="mail">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title3</h3>
</div>
</div>
Alternative, based on the expanded requirement.
An extra wrapper is required which should be inline-flex.
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: center
}
.wrap {
display: inline-flex;
}
.wrap > div {
flex: 1;
border: 1px solid grey;
}
.contact_img {
width: 40px;
height: 40px;
}
<div id="contact_flex_container">
<div class="wrap">
<div id="fb">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div id="yt">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem ipsum.</h3>
</div>
<div id="mail">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem</h3>
</div>
</div>