This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}
Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>
You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
Related
I have an image that I want to fit in flexbox.
Card has fixed size, and I want the image to fit in without specifying size but it just ignores flexbox.
.card {
border: 2px solid #072227;
border-radius: 20px;
display: flex;
height: 30vh;
width: 40vw;
}
.card__profile-image {
display: flex;
flex-direction: column;
}
.img__cont img {
height: 100%;
}
.img__cont {
}
.card__name {
min-height: 100%;
}
<div class="card">
<div class="card__section card__profile-image">
<div class="img__cont">
<!-- <div class="image"> -->
<img src="https://scontent.fkiv9-2.fna.fbcdn.net/v/t39.30808-6/317808332_704091791080096_1098720845539800517_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=FFO8v3dmkM8AX_aR9js&_nc_ht=scontent.fkiv9-2.fna&oh=00_AfDQCQcHmZH4QuauHvdxiLEFX0rExv9gMENs8ptsEzdoYg&oe=63DEF9AD" alt="Profile Picture" />
<!-- </div> -->
</div>
<div class="card__name">Alex Hill</div>
</div>
<div class="card__section">
<div class="card__info-top">
<span class="info__top-job">Senior Developer | A1-D</span>
<span class="info__top-contact">alexhill#0001</span>
</div>
<div class="card__info-bottom">6 000$</div>
</div>
</div>
https://codepen.io/watermelon-and-me/pen/jOpQGje
UPD.
Expected result:
https://i.imgur.com/MBRLAMp.png
On .img__cont and .img__cont img, set max-width and max-height to 100% each.
.card {
border: 2px solid #072227;
border-radius: 20px;
display: flex;
height: 30vh;
width: 40vw;
}
.card__profile-image {
display: flex;
flex-direction: column;
}
.img__cont, .img__cont img {
max-width: 100%;
max-height: 100%;
}
.card__name {
min-height: 100%;
}
<div class="card">
<div class="card__section card__profile-image">
<div class="img__cont">
<!-- <div class="image"> -->
<img src="https://scontent.fkiv9-2.fna.fbcdn.net/v/t39.30808-6/317808332_704091791080096_1098720845539800517_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=FFO8v3dmkM8AX_aR9js&_nc_ht=scontent.fkiv9-2.fna&oh=00_AfDQCQcHmZH4QuauHvdxiLEFX0rExv9gMENs8ptsEzdoYg&oe=63DEF9AD" alt="Profile Picture" />
<!-- </div> -->
</div>
<div class="card__name">Alex Hill</div>
</div>
<div class="card__section">
<div class="card__info-top">
<span class="info__top-job">Senior Developer | A1-D</span>
<span class="info__top-contact">alexhill#0001</span>
</div>
<div class="card__info-bottom">6 000$</div>
</div>
</div>
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
I already have everything working on the desktop but now I just can't figure out why overflow-x won't work on iOs. I already tried to set the min-width to 0 of all children and also to work it out with table instead of flex.
In the end, it should be a horizontal scroll in the image-container div, that is showing all the images on x-scroll.
As already mentioned, it runs anywhere accept on the iPhone safari browser.
Here is the code so far:
sass:
#main-container {
#image-container {
height: 466px;
width: 95.47vw;
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
#images {
padding-top: 41px;
left: 0;
height: 466px;
width: 1399.8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-spacing: 0;
.bodytext {
width: 296.46px;
}
.image {
padding-bottom: 0;
padding-right: 17.5px;
align-self: flex-end;
&:last-child {
padding-right: none;
}
img {
opacity: 100%;
width: 296.46px;
height: auto;
cursor: pointer;
}
img:hover {
opacity: 50%;
}
}
}
}
html:
<div id="main-container">
<div id="image-container">
<div id="images">
<div class="image" id="0-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="1-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
<div class="image" id="2-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="3-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
</div>
</div>
Thanks a lot!
Is it possible to make the following layout just with Flexbox? Or what would be the recommended way?
Example code (getting images from an API):
<div class="container">
{images.map(image => {
return(
<div class="item">
<img src={image.thumbnail} />
</div>
);
})}
</div>
Example CSS:
.container {
display: flex;
flex-flow: row wrap;
}
img:nth-child(3) {
flex: 1 100%;
}
Simply set flex-basis: 100% to your third flex item
An additional rule setting the img to width: 100% will make them size properly.
Also, for best cross browser support, keep the wrapper around each img
.container {
display: flex;
flex-flow: row wrap;
}
.item {
background: lightgray;
flex-basis: calc(50% - 10px);
margin: 5px;
}
.item:nth-child(3) {
flex-basis: calc(100% - 10px);
}
.item img {
width: 100%;
}
<div class="container">
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
<div class="item">
<img src='http://placehold.it/300x100' />
</div>
</div>
Maybe i don't understand correctly what you want, but here it is :
see jsFiddle or snippet below
.container {
display: flex;
flex-flow: row wrap;
}
img {
height:auto;
flex:1 50%;
}
img:nth-child(3) {
flex: 1 100%;
}
<div class="container">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>
In your example you're doing img:nth-child(3) but your images are wrapped with an div. So your images are not the flex childs. Here is a possible solution to your problem:
.container {
display: flex;
flex-wrap: wrap;
}
.container div{
width: 50%;
/* just for demonstration, not needed: */
text-align:center;
margin-bottom: 10px;
background-color: #eee;
border: 2px solid white;
box-sizing: border-box;
}
.container div:nth-child(3) {
width: 100%;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Your CSS works, you just need an additional rule for the other images to get two each into the other rows, plus you can leave out the wrapping DIVs (if that's not possible/desired, just apply the same rules to the DIVs instead and set all image widths to 100%):
.container {
display: flex;
flex-flow: row wrap;
}
img {
box-sizing: border-box;
width: 50%;
padding: 10px;
}
img:nth-child(3) {
flex: 1 100%;
}
<div class="container">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
</div>
I want to create a layout for an itemised list of content like below:
Each item is a container that has an image and block of text.
I have attempted to use nth-child and set different css float values based on if it is an odd or even child, but you can't set child properties using the nth-child selector.
HTML:
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
CSS:
.flex-container {
width: auto;
margin: 10px auto;
padding: 0 15px;
display: inline-flex;
}
.flex-container:nth-child(odd) {
.media-container {
float: left;
}
.text-container {
float: right;
}
}
.flex-container:nth-child(even) {
.media-container {
float: right;
}
.text-container {
float: left;
}
}
.media-container {
position: relative;
display: inline-block;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
align-self: center;
position: relative;
display: inline-block;
}
What is the easiest/neatest solution for creating this layout using CSS?
Something like this:
Use the nth-child on your "row" flex-containers and alternate the flex-direction.
.flex-container {
padding: 0 15px;
display: flex;
width: 80%;
border: 1px solid grey;
margin: 1em auto;
}
.flex-container:nth-child(odd) {
flex-direction: row;
}
.flex-container:nth-child(even) {
flex-direction: row-reverse;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
}
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
Take A Look At This:
.item {
width: 305px;
height: 70px;
background: black;
margin: 5px;
padding: 5px;
}
.item .title {
width: 200px;
height: 70px;
background: crimson;
}
.item .img {
width: 100px;
height: 70px;
background: #09f;
}
.item:nth-child(even) .img {
float: right;
}
.item:nth-child(even) .title {
float: left;
}
.item:nth-child(odd) .img {
float: left;
}
.item:nth-child(odd) .title {
float: right;
}
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
Is it necessary that it is display:inline-flex? If you change it to inline-block, I believe you'll get your intended display:
.flex-container {
display: inline-block;
...
}
https://jsfiddle.net/4rcdqy4f/
You can use the Javascript querySelectorAll() method. Then, loop through the list of your items and add the specific CSS property based on whether it is odd or even.