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; }
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 am using flex and have 2 columns. These items both fill all height available.
Inside item 1 I've added 2 div's ... the second one I need it to fill up all space available and scroll Y if items inside it go overflow.
I cannot get .box to go 100% height of it's parent.
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="title">Title here</div>
<div class="box">
Box Here
</div>
</div>
<div class="item"></div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
min-height: 98vh;
}
.item {
flex: 1;
}
.item:nth-child(1) {
background-color: blue;
}
.item:nth-child(2) {
background-color: red;
}
.title {
font-size: 30px;
color: white;
}
.box {
background-color: grey;
height: 100%; /* not working */
align-self: stretch;
overflow-y: scroll;
}
How can I fix this issue?
Use this css:
.container {
min-height: 98vh;
}
.flex {
/* display: flex; */
/* flex-direction: column; */
height: 98vh;
}
.item {
/* flex: 1; */
height: 50%;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
height: 100%;
overflow-y: auto;
background-color: grey;
}
No need to use flex and complicate the problem
I changed the HTML layout a little bit. You can use flex.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="title">Title here</div>
<div class="flex">
<div class="item item1">
<div class="box">
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
</div>
</div>
<div class="item item2"></div>
</div>
</div>
</body>
</html>
CSS
.container {
min-height: 98vh;
}
.flex {
display: flex;
flex-direction: column;
height: 98vh;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
background-color: grey;
overflow-y: scroll;
flex: 1;
}
I have finally achieved making a nav bar with text aligned left with small spaces between. I think using flex items is not the best way. Please show me how to align the nav bar with spaces between on the left
<link rel="stylesheet" href="styles.css" type="text/css">
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
I assume your navbar has links so the best semantic tag for the link is <a>.
If you put <a> instead of <p> you don't need to add flexbox styling as a is an inline element.
* {
margin: 0%;
padding: 0%;
}
.container {
border: solid black 1px;
background-color: aqua;
color: blue;
padding: 12px;
}
.container a {
text-decoration: none;
margin: 0 4px;
}
<nav class="container">
<a class="item1" href="page1">Events</a>
<a class="item2" href="page2">Results</a>
<a class="item3" href="page3">Partnering Restaurants</a>
</nav>
Is this what you are looking for?
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
nav p {
padding: 0 10px;
}
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
Since nav have links, use <a> instead of <p>. So you nav markup should be something similar to this:
<nav class="container">
<a class="item1" href="#">Events</a>
<a class="item2" href="#">Results</a>
<a class="item3" href="#">Partnering Restaurants</a>
</nav>
please clear your question
but here is solution i find
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
</html>
here is css
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
padding: 10px 2%;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.container > *{
width: auto;
padding-right: 5%;
}
what i changes i maked
padding on top and bottom
no need of this
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
use this >*
here is the sample
<!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>
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