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%;
}
Related
To prevent text overflow, I want to make the child (.content2) of a flex container (.container2) scrollable. The flex container (.container2) is, in turn, child of another flex container (.container). Due to the nested flexboxes, the height of .content2 can only be set as a fixed value to enable scroll.
How can I handle this issue and get the .content2 container scrollable while taking the remaining space of its parent?
HTML
<!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" />
<link rel="stylesheet" href="./style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<h1>
Navbar 1
</h1>
</nav>
<div class="content">
<div class="container2">
<nav class="navbar2">
<h1>
Navbar 2
</h1>
</nav>
<div class="content2">
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
<!-- .... and so on, till the text overflows -->
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Parent Container */
.container {
border: 1px solid black;
height: 100vh;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}
.navbar {
background-color: wheat;
padding: 10px;
text-align: center;
}
.content {
border: 1px solid black;
padding: 10px;
flex: 1;
}
/* Child Container */
.container2 {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}
.navbar2 {
background-color: wheat;
padding: 10px;
text-align: center;
}
.content2 {
flex: 1;
padding: 10px;
border: 1px solid purple;
overflow: scroll;
}
.content2 h1 {
font-size: 18px;
font-weight: normal;
}
Check this sandbox for your convenience:
CodeSandbox Example
It was an one line solution, but took me a while.
.content2 {
flex: 1 1 0;
}
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%;
}
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;
}
<!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>
I am new to CSS and have been learning it.
I cannot seem to figure out how to make the 2 elements in the Div to perfectly vertically align with one another. I have been reading lots and lots of articles but I still cannot get my head around what I am doing wrong.
I have attached my code - your help would be great in my journey of learning.
Thank you!
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
To vertically align the contents of the boxes, you need to add align-items: center to their CSS.
Try flex-direction: column; it will make them appear on top of each other.
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
flex-direction: column;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
For your main div block, here .container1, set display attribute to block. It'll work!
.container1 {
width: auto;
display: block;
flex-direction: column;
padding: 10px;
height: auto; }