I created a small sample that shows movie covers and I like the "flex: calc(...)" in action. As the browser window is reduced the size of the images are also reduced a bit. However notice when the image wraps, the wrapped image is in full width. Is it possible to make the wrapped image to be the same size as the images above it?
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.movies {
max-width: 1300px;
margin: 0 auto;
}
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
margin: 10px 15px 0;
}
.flex-item > img {
width: 100%;
height: 100%;
display: block;
}
/* Tablet */
#media screen and (min-width: 40em) {
body {
background: limegreen;
}
.movies {
max-width: 700px;
}
.flex-item {
margin: 0 15px 32px;
flex: calc(50% - 30px);
}
}
/* Desktop */
#media screen and (min-width: 70em) {
body {
background: lightyellow;
}
.movies {
max-width: 1200px;
}
.flex-item {
margin: 0 6px 15px;
flex: calc(33.3333% - 20px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="learn-flex.css">
<title>Learn Flex</title>
</head>
<body>
<div class="movies">
<div class="flex-container">
<div class="flex-item-1 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
</div>
<div class="flex-item-2 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
</div>
<div class="flex-item-3 flex-item">
<img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
I want the image with the dogs to be the same size as the ones above and leave the space on the right side empty, since there is no fourth cover. Is it possible to achieve that with flexbox?
If you are setting the width of a flex item you can also ask that it neither shrink nor grow. e.g. in your tablet case:
.flex-item {
margin: 0 15px 32px;
flex: 0 0 calc(50% - 30px);
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.movies {
max-width: 1300px;
margin: 0 auto;
}
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
margin: 10px 15px 0;
}
.flex-item > img {
width: 100%;
height: 100%;
display: block;
}
/* Tablet */
#media screen and (min-width: 40em) {
body {
background: limegreen;
}
.movies {
max-width: 700px;
}
.flex-item {
margin: 0 15px 32px;
flex: 0 0 calc(50% - 30px);
}
}
/* Desktop */
#media screen and (min-width: 70em) {
body {
background: lightyellow;
}
.movies {
max-width: 1200px;
}
.flex-item {
margin: 0 6px 15px;
flex: 0 0 calc(33.3333% - 20px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="learn-flex.css">
<title>Learn Flex</title>
</head>
<body>
<div class="movies">
<div class="flex-container">
<div class="flex-item-1 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
</div>
<div class="flex-item-2 flex-item">
<img src="https://images-na.ssl-images-amazon.com/images/I/71VDlRubWtL._AC_SY741_.jpg" alt="">
</div>
<div class="flex-item-3 flex-item">
<img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
Related
Here's how my child divs look and I'm trying to make them have less space in between when they wrap
I think the problem is in the media query
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
width: 100%;
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
/* added the line above remove if erros */
}
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: red;
align-items: center;
}
.item {
margin: 2% 1%;
width: 95%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.container-1 img {
width: 50%;
height: 100%;
}
.container-2 {
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.item {
margin: 2% 1%;
width: 25%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/menu.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu | Andy's House</title>
</head>
<body>
<div class="container-2">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</body>
</html>
I want to make them have less space between them. If anyone knows how to, it would be greatly appreciated!
P.S: If you couldn't tell, I am a noob. So, I am sorry :(
The problem wasn’t the media query. I would change the container height to auto. Like this:
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: red;
align-items: center;
}
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
#media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables.
Next here is the css:
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius, border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
Add a float property to the .avatar_img class
.avatar_img {
float: left;
}
Wrap title__text and secondary__text inside div,
and then wrap avatar__img and title inside flexbox div.
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd. Hope it helps you
I created a responsive four-column layout by using a mobile-first approach. The smallest screen shows 1 column, the larger screen 2 columns, and the largest screen 4 columns.
It seems to work so far, but I'd like you to take a look at my code and tell me if there's anything wrong with my approach. I would be grateful for your opinions.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox Test</title>
<style>
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* mobile phone */
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
border: 1px solid red;
padding: 1em;
}
.flex-item-1 {
background: indianred;
}
.flex-item-2 {
background: blue;
}
.flex-item-3 {
background: tomato;
}
.flex-item-4 {
background: coral;
}
.flex-item {
flex: 100%;
height: 100px;
}
/* tablet */
#media screen and (min-width: 640px) {
.flex-item {
flex: calc(50% - 1em);
}
.flex-item:nth-child(2n) {
margin-left: 1em;
}
}
/* desktop */
#media screen and (min-width: 960px) {
.flex-item {
flex: calc(25% - 1em);
}
.flex-container > * + * {
margin-left: 1em;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item flex-item-1">
1
</div>
<div class="flex-item flex-item-2">
2
</div>
<div class="flex-item flex-item-3">
3
</div>
<div class="flex-item flex-item-4">
4
</div>
</div>
</body>
</html>
If you want remove calc from the css you can do something like that.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox Test</title>
<style>
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* mobile phone */
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
border: 1px solid red;
padding: 1em;
}
.flex-item-1 {
background: indianred;
}
.flex-item-2 {
background: blue;
}
.flex-item-3 {
background: tomato;
}
.flex-item-4 {
background: coral;
}
.flex-item {
flex: 100%;
height: 100px;
}
/* tablet */
#media screen and (min-width: 675px) and (max-width: 960px) {
.flex-item {
flex: 1 0 19em;
}
.flex-item:nth-child(2n) {
margin-left: 1em;
}
}
/* desktop */
#media screen and (min-width: 960px) {
.flex-item {
flex: 1 0;
}
.flex-container > * + * {
margin-left: 1em;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item flex-item-1">
1
</div>
<div class="flex-item flex-item-2">
2
</div>
<div class="flex-item flex-item-3">
3
</div>
<div class="flex-item flex-item-4">
4
</div>
</div>
</body>
</html>
However to keep the margin as you have on your initial example, I have to change #media screen and (min-width: 675px) and (max-width: 960px) for tablet screen. If not, three block appears on the first line for specific browser width (not the same behaviour as you want).
What do you think about that ?
I want to place description under the photo from 768px up, but without white gap between them. Could someone help me.
I note that the HTML order cannot be changed. Eventually element's can be wrapped.
I tried flexbox and grid layout but with no success.
Below is the latest version of what I am trying to achieve.
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
}
.container div {
padding: 20px;
}
.container .name {
background: orange;
}
#media (min-width: 768px) {
.container .name {
flex-basis: 100%;
}
}
.container .photo {
background: yellow;
}
#media (min-width: 768px) {
.container .photo {
flex-basis: 50%;
padding: 100px 20px;
}
}
.container .price {
background: purple;
}
#media (min-width: 768px) {
.container .price {
flex-basis: 50%;
padding: 150px 20px;
}
}
.container .description {
background: blue;
flex-basis: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="name">name</div>
<div class="photo">photo</div>
<div class="price">price</div>
<div class="description">description</div>
</div>
</body>
</html>
You don't really need flexbox layout for that. A couple of good old-fashioned floats will do.
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.container {
position: relative;
}
}
.container div {
padding: 20px;
}
.container .name {
background: orange;
}
.container .photo {
background: yellow;
}
#media (min-width: 768px) {
.container .photo {
float: left;
width: 50%;
padding: 100px 20px;
}
}
.container .price {
background: purple;
}
#media (min-width: 768px) {
.container .price {
float: right;
width: 50%;
padding: 150px 20px;
}
}
.container .description {
background: blue;
}
#media (min-width: 768px) {
.container .description {
float: left;
clear: left;
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="name">name</div>
<div class="photo">photo</div>
<div class="price">price</div>
<div class="description">description</div>
</div>
</body>
</html>
I have tried to make it look like the below picture, but I can not do it.
Everytime he put it right on or under the big col -.-
Grid System Picture I Want
Here is my code:
.row {
margin-top: 0.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 1 8%;
margin: 0 0 0.5rem 0;
padding: 0.5em 10px;
box-sizing: border-box;
}
/* nested grids */
.row .row, .row.nested {
flex: 1 1 auto;
margin-top: -0.5em;
}
/* full width grids */
.row.wide-fit {
margin-left: -10px;
margin-right: -10px;
}
/* center grids */
.row.center {
justify-content: center;
}
.center .col {
flex-grow: 0;
flex-shrink: 0;
}
/* columns widths */
.col-span-1 {
flex-basis: 8.3333%;
}
.col-span-2 {
flex-basis: 16.6666%;
}
.col-span-3 {
flex-basis: 25%;
}
.col-span-4 {
flex-basis: 33.3333%;
}
.col-span-5 {
flex-basis: 41.6666%;
}
.col-span-6 {
flex-basis: 50%;
}
.col-span-7 {
flex-basis: 58.3333%;
}
.col-span-8 {
flex-basis: 66.6666%;
}
.col-span-9 {
flex-basis: 75%;
}
.col-span-10 {
flex-basis: 83.3333%;
}
.col-span-11 {
flex-basis: 91.6666%;
}
.col-span-12 {
flex-basis: 100%;
}
/* examples */
.fixed-width {
flex: 0 0 500px;
background-color: rgba(255,0,0,0.1) !important;
}
#media all and (max-width: 568px) {
.col-span-1,
.col-span-2,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}
.col-span-6,
.col-span-7,
.col-span-8,
.col-span-9,
.col-span-10,
.col-span-11 {
flex-basis: 100%;
}
.nested .col {
flex-basis: 100%;
}
}
/* eye candy */
body {
font-family: sans-serif;
}
.row {
background-color: #cccccc;
background-color: rgba(0,0,0,0.1);
}
.col {
background-color: #999999;
background-color: rgba(0,0,0,0.2);
background-clip: content-box;
border: 1px solid rgba(0,0,0,0.1);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Grid System</title>
<link rel="stylesheet" href="css/fb-grid.css">
</head>
<body>
<div class="row">
<div class="col col-span-8">1</div>
<div class="col col-span-2">2</div>
<div class="col col-span-2">3</div>
<div class="col col-span-4">4</div>
<div class="col col-span-4">5</div>
<div class="col col-span-4">6</div>
</div>
</body>
</html>
Does anyone have any suggestions ?
HTML code will looks like
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Grid System</title>
<link rel="stylesheet" href="css/fb-grid.css">
</head>
<body>
<div class="row">
<div class="col col-span-8">1</div> <!-- give required height-->
<div class="col col-span-4">
<div class="col col-span-12">2</div><!--code change-->
<div class="col col-span-12">3</div><!--code change-->
</div>
<div class="col col-span-4">4</div>
<div class="col col-span-4">5</div>
<div class="col col-span-4">6</div>
</div>
</body>
</html>