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;
}
Related
I'm new to css and I need help with one question. Why flex-grow does not expand the block__column_2 div till the end of the screen? It should be the expected behaviour according to the course theory. Please advise what I'm doing wrong?
Code sample can be seen below. index.html + style.css
<!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>flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="block">
<div class="block__row">
<div class="block__column block__column_1">
<div class="block__item">1</div>
</div>
<div class="block__column">
<div class="block__item block__column_2">2
<br>Более высокий блок
</div>
</div>
<div class="block__column block__column_3">
<div class="block__item">3</div>
</div>
</div>
</div>
</div>
</body>
</html>
.wrapper{
height: 100%;
overflow: hidden;
min-height: 100%;
padding: 50px;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.block__row{
border: 20px solid #ece89d;
margin: 0px 0px 20px 0px;
display: flex;
flex-direction: column;
height: 1024px;
align-items: stretch;
}
.block__column{
border: 20px solid #5e5373;
}
.block__column_1{}
.block__column_2{
flex-grow: 1;
flex-basis: auto;
}
.block__column_3{}
.block__item{
background-color: #18b5a4;
padding: 50px;
font-size: 50px;
color: #fff;
font-weight: 700;
text-align: center;
}
remove block__column_2 class from div.block__item and add to div.black_column
and add display:flex for block__column
The display: block property on the parent element prevents flex-grow from having an effect.
Try setting the display: block property on the parent to display: flex.
and add width:100%; to the .block__item
<div class="block__column block__column_2">
<div class="block__item">2
<br>Более высокий блок
</div>
</div>
.block__column{
border: 20px solid #5e5373;
display: flex;
}
.block__column_1,
.block__column_3{
flex-grow: 0;
}
.block__column_2{
flex-grow: 1;
}
.block__item{
background-color: #18b5a4;
padding: 50px;
font-size: 50px;
color: #fff;
font-weight: 700;
text-align: center;
width: 100%;
}
I'm designing a dashboard using Chart.js graphs and Canvases. Please see the dashboard below:
The design is exactly what I want until I resize the page to make it smaller and then resize it again to make it bigger. When I do this I end up with the following:
This did not occur until I added the second chart and made the div element containing them both a flexbox. Before making the div a flexbox I had the following layout:
This can easily be resized into the following form for a smaller window:
and then resized again into the larger form from the previous image. What change has flexbox made that stops the automatic resizing of the charts?
My code is below. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css_styles/main.css">
<title>Plus UI Design</title>
</head>
<body>
<div class="overview_container">
<div id="plusPointsContainer" class="points_container-main">
<div id="plusPointsDoughnut" class="doughnut_holder">
<canvas id="plusPoints" height="400" width="400"></canvas>
</div>
<div class="points_display-horizontal">
<div class="points_display-vertical">
<div>
<div class="points_header">Today:</div>
50
</div>
<div class="points_display-yesterday">
<div class="points_header-smaller">Yesterday:</div>
60
</div>
</div>
</div>
</div>
<div class="bar_chart_container">
<canvas id="overviewBarGraph" height="400" width="600"></canvas>
</div>
</div>
</body>
</html>
CSS:
.overview_container {
display: flex;
}
.bar_chart_container {
max-width: 600px;
max-height: 400px;
}
.points_container-main {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 400px;
min-width: 250px;
max-height: 400px;
min-height: 250px;
margin-right: 5vw;
}
.points_display-horizontal {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.points_display-vertical {
position:relative;
top: 8%;
font-family: Helvetica Neue;
font-size: 70px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.points_display-yesterday {
font-size: 30px;
text-align: center;
margin-top: -10px;
color: rgba(0, 0, 0, 0.4);
}
.points_header {
font-size: 10px;
margin-bottom: -10px;
}
.points_header-smaller {
font-size: 10px;
margin-bottom: -3px;
}
I have only included the html and css parts as I don't think Javascript is the issue here, but I can update the code section if anyone thinks it is the issue.
Try to remove from .points_container-main and .bar-chart-container max-width, min-width styles. Add them styles in flex world:
.points_container-main{
flex: 0 0 auto;
width: 25%;
}
.bar-chart-container{
flex: 0 0 auto;
width: 75%;
}
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! :)
<!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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Hi everybody! I've been learning flex box but I'm having a problem with this particular example. There's a thin white space between the border and the elements, like a thin margin. I don't know why is it there and how to remove it. Can somebody help me, please?
EDIT: I'm not refering to the space-between propery, I want it, but there is a thin margin going from top to bottom, left and right that shouldn't be there
If you want to remove spacing in between, your child box div should be 1/4 of the width of the parent div, like below code
<!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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 25%;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Is this what you want?
*{ /*Don't mind this, this is in place of your body style*/
margin:0;
padding:0;
}
.container {
box-sizing:border-box;
width: 100vw;
height: 100vh;
/* margin: 10px auto; This the one causing it to be surrounded by a white border*/
display: flex;
flex-direction: row;
/*justify-content: space-between; TAKE THIS OUT*/
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
flex-grow:1; /* ADD THIS IN */
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
display:flex;
justify-content: center;
align-items: center;
}
.container {
background-color: green;
border:1px solid black;
width:80vw;
height:80vh;
}
In the above code I am trying to align my div content to display in the center but it is not displaying what changes should I make to do so.
You forgot to add height for the body.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This will solve your issue.
If you want to use the same flex command you must add a height property.
For example:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}