I have a flex-container with three items and the flex-direction set to row. I put different sizes for each of the three boxes so that they're in an ascending order. item 1 should be 100px, item 2 is 400px, item 3 should be 800px. When I run this, its in reverse. Why is this in reverse and how do I make it not reverse?
https://codepen.io/sgtsnoots/pen/XWgPZbE
<!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">
<title>Document</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h1>hello</h1>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif
}
.flex-container {
display: flex;
flex-direction: row;
background-color: #aaa;
/*always on the main access X axis */
/* justify-content: start; */
/*always on the cross access Y axis*/
/* align-items: flex-start; */
/* flex-wrap: wrap; */
}
.item {
background: #254de4;
color: #fff;
/* flex-basis: 100px; */
height: 100px;
/* margin: 10px; */
/*same thing for above, but for div contents*/
border: 2px solid magenta;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.item:nth-last-of-type(1){
flex-basis: 100px;
}
.item:nth-last-of-type(2){
flex-basis: 400px;
}
.item:nth-last-of-type(3){
flex-basis: 800px;
}
If you use :nth-child() your problem will be solved.
The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.
The :nth-last-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name), counting from the end.
dont make the code complex.
just do this
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container .item {
color: white; \\ to see the items
background: black;
}
if your code make it reverse.
then adding reverse make it reverse again going back to normal:
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Related
I am trying to build this dynamic navigation bar with two zones, and only set sizes on the menu items. The yellow zone items shall wrap freely while the red zone items shall be presented at the bottom with no wrapping. Can i have some guidance on how to solve this..am totally lost :/
Navigation container
width: Full page
height: Depends on content height
Yellow Zone
width: Full page - red zone
height: Depends on content height
items wraps to x new rows
Red Zone:
width: Depends on content width
height: Same as yellow zone
items does not wrap and are presented on the same row as the last row on the yellow zone
This should do what you are looking for. To do most of the styling I used flex-box, so if you don't know it yet, I suggest you learn it, it's very useful.
What I basically do is use two separate containers to which I'm going to apply a different flex-flow. flex-flow takes the direction (row/column) as the first "parameter" and the wrap (wrap/nowrap) as the second. I add a little gap between the elements and you can style the rest as you prefer.
I'll also link you to the codepen, so you can test it easier.
*, *::before, ::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
display: flex;
flex-flow: row nowrap;
background: gray;
}
.wrap {
display: flex;
flex-flow: row wrap;
flex-grow: 2;
gap: .5rem;
background: yellow;
padding: .4rem;
}
.nowrap {
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
align-items: flex-end;
gap: .5rem;
background: red;
padding: .4rem;
}
.element {
width: 500px;
height: 50px;
background: blue;
}
.element-2 {
width: 300px;
height: 50px;
background: blue;
}
<!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">
<title>Document</title>
</head>
<body>
<nav>
<div class="wrap">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="nowrap">
<div class="element-2"></div>
<div class="element-2"></div>
<div class="element-2"></div>
</div>
</nav>
</body>
</html>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav,
.yellow,
.red {
display: flex;
}
.yellow {
flex-wrap: wrap;
background: yellow;
gap: 1rem;
}
.red {
background: red;
gap: 1rem;
}
.red a {
align-self: flex-end;
}
.yellow,
.red {
padding: 1rem 2rem;
}
a {
padding: 1rem 2rem;
border: 1px solid teal;
}
</style>
<nav>
<div class="yellow">
A1
A2
A3
A4
A5
A6
A7
</div>
<div class="red">
B1
B2
B3
</div>
</nav>
</body>
Basically, it is a simple Joke Generator app that gets some text from an API and then puts it in a div container on which I have applied flexbox to center the text, a button, an image, and a title which are inside of it.
However, the container itself is stuck to the top of the page and I am not able to figure out how to center it vertically to the middle of the page since the height of the container depends on the size of the text that it receives from the API.
The issue I am facing:
When I tried to apply display flex to the body and use align-items it is not centering the container vertically based on the viewport's height.
Browser Screenshot
CSS[.scss]:
$primary-color: rgb(33, 41, 53);
$secondary-color: rgb(254, 213, 180);
$tertiary-color: rgb(214, 27, 64);
$hover-color: rgb(65, 76, 93);
$gradient-bg: linear-gradient(to bottom, $primary-color, $tertiary-color);
html {
min-height: 100%; //for the gradient to stretch properly
}
body {
background: $gradient-bg;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
min-height: 20rem;
min-width: 5rem;
background-color: $secondary-color;
border-radius: 1.5rem;
margin: 0 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem 0;
overflow: hidden;
}
HTML:
<body>
<div class="container">
<img alt="" id="ultra-laugh" />
<div class="heading"><h1>Joke Generator</h1></div>
<div class="joke" id="joke"></div>
<button id="joke-button" class="btn">Get another Joke</button>
</div>
</body>
Any help is greatly appreciated!
In your css code change height value from 100% to 100vh, and that will center verticaly.
html {
min-height: 100%;
}
body {
background: blue;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
min-height: 20rem;
min-width: 5rem;
background-color: lightblue;
border-radius: 1.5rem;
margin: 0 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem 0;
overflow: hidden;
}
<!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="index.css"/>
<title>Document</title>
</head>
<body>
<div class="container">
<img alt="" id="ultra-laugh" />
<div class="heading"><h1>Joke Generator</h1></div>
<div class="joke" id="joke"></div>
<button id="joke-button" class="btn">Get another Joke</button>
</div>
</body>
</html>
You were so close to having this!
If you are trying to vertically and horizontally center something, set the width and height as you did, and then set the margin-top and margin-left to half of what your width and height are.
Replace your margin on your container class with this:
margin-top: 10rem;
margin-left: 2.5rem;
Hopefully this helps! :)
I'm starting to learn web development from here.
Currently, I am working fidgeting around with the code shown below to understand flexbox better.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
Relevant CSS code:
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
The webpage looks like this:
I want to know how do I right or left align the main div in the background? Which style/command does one use for this?
EDIT: I know how to align the smaller squares present inside the div. I want to know how do I align the big blue-ish rectangle in the background of the containers to the right or the left. By default its centered. Apologies if that was not clear in the question before.
You have left and right margin defined at auto right now so it's currently centered. You can set margin-left: auto; for it to be right-aligned, and do the opposite for it to be left-aligned.
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin-left: auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
For left align align-items: flex-start; and
align-items: flex-end; for right align.
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/*right align*/
align-items: flex-end;
/*left align*/
/* align-items: flex-start; */
/* justify-content: flex-end; */
flex-wrap: wrap;
}
#container div {
height: 200px;
width: 200px;
}
Right align
if you want that the elements in your section get aligned to the right you should add :
align-items: flex-end;
your section css should be like so :
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
align-items: flex-end;
flex-wrap:wrap;
}
How can I make the shrink element "shrink" when the flex container below grows as a result of flex-wrapping. What is happening now is that new space created below the container instead of shrinking the one above. For some reason flex-grow and flex-shrink are not working expectedly whenever wrap happens. I want everything to fit within the viewport so that the user does not need to scroll.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.main-container {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
padding-top: 30%;
height: 80vh;
width: 100vw;
flex-shrink: 0;
}
.grow {
height: 20vh;
width: 30vw;
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.grow>* {
border: 5px solid #654c4f;
height: 100%;
background-color: #b26e63;
width: 50%;
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
</body>
</html>
There are a few concerns in your CSS. See the working snippet below.
1. flex-shrink: 0; prevents it from shrinking.
For flex-children to be flexibly growing and shrinking, you'd probably want flex: 1; or some other shrink/grow values than 0.
2. explicit height of 80vh and 20vh make them of static height.
That is, they will remain of those specific height rather than flexibly changing their relational heights as you indicated in your drawing. You'd want to remove those values.
3. padding-top: 30% pushes the content down, forcing the height
I wonder if you included it just to push the placeholder text down. But in any case, it's one of the factors that stops the shrink from shrinking.
4. width: 50% + border: 5px - border-box > 50% of available space
Again, this might be just a placeholder style. But in any case, unless you set it to box-sizing: border-box; the width will become 50% + 5px and will unexpectedly wrap.
Below are cleaned up suggestion, based on your drawing in the question.
html, body {
padding: 0;
margin: 0;
}
.main-container {
display: flex;
border: 1px solid red;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex: 3;
}
.grow {
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex: 1;
align-items: flex-start;
}
.grow>* {
box-sizing: border-box;
border: 5px solid #654c4f;
height: 50px;
background-color: #b26e63;
flex-basis: 50%;
}
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
This question already has an answer here:
flex-grow not working in column layout
(1 answer)
Closed 4 years ago.
I'm trying to have space between each .box element, however space-between is not acting to create spaces between the boxes. The boxes appear with no space in between them.
* {
box-sizing: border-box;
}
.grid {
border: black dashed 1px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
.grid * {
border: 1px red solid;
}
.box {
height: 100px;
width: 100px;
background-color: blue;
}
<div class="grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
See codesandbox: https://codesandbox.io/s/8j7k4xjzl
The code is actually working. The problem is the ".grid" div is taking the minimum height required according to it's content.
If you give ".grid" div height equal to 100vh you can see the result.
height: 100vh;
Here's a fiddle showing the result:
https://jsfiddle.net/ayushgupta15/w30h5kep/
Please tell if this is the solution you're looking for.
Space-between is used for horizontal "box spacing". What you're looking for is margin.
.box {
height: 100px;
width: 100px;
background-color: blue;
margin: 5px;
}
like so.
<!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>Document</title>
</head>
<body>
<style>
* {
box-sizing: border-box;
}
.grid {
border: black dashed 1px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
.grid * {
}
.box {
height: 100px;
width: 100px;
background-color: blue;
margin: 5px;
}
</style>
<div class="grid">
<div class="box">1
</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
You can edit the top, right, left, bottom margin if you want to do so:
margin: (top) (right) (bottom) (left);