I've recently started learning CSS Flexbox. Even though I'm being able to follow the curriculum, I'm having issues with some codes.
In the code below, I'm trying to use these two properties I learnt recently, flex-shrink and flex-grow, inside of a flex-container, the first two of the four div boxes are visible but the other two are not visible in the screen layout. Can someone please explain me that why I'm having such issues and what should I do?
Thank you.
Here's my code-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#box-container {
display: flex;
height: 300px;
}
#box-1 {
background-color: dodgerblue;
height: 50px;
flex-grow: 1;
}
#box-2 {
background-color: orangered;
height: 50px;
flex-grow: 2;
}
#box-3 {
background-color: dodgerblue;
height: 50px;
flex-shrink: 2;
}
#box-4 {
background-color: orangered;
height: 50px;
flex-shrink: 1;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
None of the boxes has any content. The first two boxes can expand because of flex-grow and the next two shrink by default even if you don't specify flex-shrink. This is why only the first two boxes are visible.
If you want to let them take equal widths with no content you can use flex: 1 1 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#box-container {
display: flex;
height: 300px;
}
#box-container > * {
flex: 1 1 auto;
height: 50px;
}
#box-1 {
background-color: dodgerblue;
}
#box-2 {
background-color: orangered;
}
#box-3 {
background-color: dodgerblue;
}
#box-4 {
background-color: orangered;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
Related
I nearly spend 4 hours trying to make this layout. I tried absolute positioning but obviously, It's not responsive.
Image is 660px and Right container is 860px.
<div className="container">
<div className="image-container">
<img src={image} />
</div>
<div className="right-container">
<div className="insde-some-text">
</div></div>
As far as my knowledge goes, you can only do this by position absolute and then changing the widths at certain breakpoints using media queries.
To add to what Khubaib said, you would want to use position: absolute in your .css file. Also, using scalable quantities for the boxes will help you for the certain screen sizes that you want your site displayed on.
Also, you can use position: relative on blue block and make the attribute top: -100px or so. This blue-block will always be relative to its normal position.
.red-block
{
width: 20rem;
height: 20rem;
background-color: red;
position: absolute;
}
.blue-block
{
width: 20rem;
height: 20rem;
background-color: blue;
position: absolute;
top: 50%;
left: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class = "red-block">
</div>
<div class = "blue-block">
</div>
</body>
</html>
You could use this for reference. Simple demonstration using flex and margin.
.wrapper {
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 100%;
}
.right-container {
border: solid red 1px;
border-radius: 5px;
width: 860px;
height: 860px;
background-color: #e1e1e1;
text-align: center;
}
textarea {
height: 80%;
width: -webkit-fill-available;
text-align: center;
background-color: lightblue;
}
.img {
margin-right: -3em;
position: relative;
}
img {
max-width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="img">
<img src="https://dummyimage.com/660x400/000/fff" alt="">
</div>
<div class="right-container">
<textarea placeholder="hello world"></textarea>
<p>foooooooooooooooooooooo</p>
</div>
</div>
</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 1 year ago.
Good time everybody, i have several elements with class 'someclass' and name 'somename', and a complex selector like:
.someclass[name="somename"]
And i want to add style only to 2nd element. So i try
.someclass[name="somename"]:nth-of-type(2) {}
but it does not work as it have to work. While if selector is not complex, for example, just:
.someclass:nth-of-type(2) {}
it works normally. I tried different kind of brackets, but still have this problem. What is a solution?
UPDATE: I was looking for a way to use nth-of-type for elements, that goes not one-by-one.
My code was like:
<div class="someclass" name="somename">1</div>
<div class="someclass2" name="somename">2</div>
<div class="someclass" name="somename">3</div>
<div class="someclass" name="somename">4</div>
<div class="someclass" name="somename">5</div>
That's why my code does not worked! Finally there are some solutions in comments
Works for me just as you described.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.someclass {
height: 200px;
width: 100px;
border: 1px solid lightseagreen;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.someclass[name="somename"]:nth-of-type(2) {
background: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="someclass" name="somename">1.</div>
<div class="someclass" name="somename">2.</div>
<div class="someclass" name="somename">3.</div>
<div class="someclass" name="somename">4.</div>
<div class="someclass" name="somename">5.</div>
</body>
</html>
Solution for UPDATE
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.container div {
height: 200px;
width: 100px;
border: 1px solid lightseagreen;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.container div:nth-child(2) {
background: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="someclass" name="somename">1.</div>
<div class="someclass2" name="somename">2.</div>
<div class="someclass" name="somename">3.</div>
<div class="someclass" name="somename">4.</div>
<div class="someclass" name="somename">5.</div>
</div>
</body>
</html>
I opened CodePen and wrote this
In the HTML section:
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
In the CSS section:
.yellow[name='blue']:nth-of-type(2) {
color: red;
}
and, as you see in the photo, seems to work fine.
If you need more resources look here under the section Attribute Selectors
I have a flex container, and in that container, I have a bunch of images. Using flexwrap, and a flex-item width of 33%, this presents the images nicely ... in Chrome (that is, they maintain their aspect ratios). In Safari, however, the images get stretched in the vertical direction which looks terrible.
Is there a fix for this?
(Note: For the code snippet below, you will have to open this post in both Chrome and Safari to see what I am talking about)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src='https://swipestack.s3.amazonaws.com/s/q/1.jpg' alt='1'>
<img src='https://swipestack.s3.amazonaws.com/s/q/2.jpg' alt='2'>
<img src='https://swipestack.s3.amazonaws.com/s/q/3.jpg' alt='3'>
<img src='https://swipestack.s3.amazonaws.com/s/q/4.jpg' alt='4'>
<img src='https://swipestack.s3.amazonaws.com/s/q/5.jpg' alt='5'>
<img src='https://swipestack.s3.amazonaws.com/s/q/6.jpg' alt='6'>
<img src='https://swipestack.s3.amazonaws.com/s/q/7.jpg' alt='7'>
<img src='https://swipestack.s3.amazonaws.com/s/q/8.jpg' alt='8'>
</div>
</body>
<style>
.container{
display: flex;
flex-wrap: wrap;
overflow: auto;
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
}
.container > * {
width: 33.33333%;
}
</style>
</html>
you can try this, which works only if you give the first and second images the same height of 475px as the others :
<style>
.container {
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
overflow: auto;
}
.container:first-child {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.container > * {
width: 33.33333%;
height: auto;
}
</style>
when i try to display blocks in grid then there is space at the end of grid item on right side and there is no space at the start of the grid i.e at the left side . You can see screenshot and code. i cannot figure it out what is the problem. I hope you can figure it out.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gird-section{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 40px;
background-color: yellow;
}
.grid-item{
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div class="gird-section">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
You can use Css Grid Layout
I have edited your code so you can have yellow space left and right. I added width in the first section in order for the parent to have more with then the child . For more editing I suggest to watch the link above.
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
I have recently started learning flexbox. I am trying to set margins between the divs inside the .parent container, but the margin is not displaying. Also, if I give a width value to any of the .child divs, they still expand to cover the whole window. Where am I going wrong?
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
flex: 1;
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
You need to remove flex: 1;, which is causing the div's to resize to fill the empty space.
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
"margins" in flexbox are going to be controlled mainly by the width of your containers, not by specifying margins. Use flex-basis to determine the width of your containers and remove the flex: 1. That's what's causing your containers to expand. And remember it's "flex" box. it's meant to fluid, so trying to adapt static values for things like margin defeats the purpose.
Tip: When debugging use background colors and not borders. Borders effect width and can cause you trouble. Cheers.
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
justify-content: space-between;
background-color: blue;
}
.child {
flex-basis: 20%;
height: 100px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
As Hunter Turner says if you remove flex: 1 it will work. This property sets the length of the item relative to the others.
MDN Docs
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>