I am playing with Flexbox for the first time and I wonder why doesn't the property align-items: flex-end work with justify-content: center. I tried changing as well to other values rather than flex-end but still nothing would move around the cross axis.
Here is my HTML/CSS Code. What am I doing wrong?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Playing with CSS Flexbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
<nav id="logo">
<p class="logotext">Welcome There!!</p>
</nav>
-->
<main id="container">
<section class="box red-box">
<!--
<img src="images/Chilli-medium.jpg" alt="chilli" class="first-image">
-->
</section>
<section class="box green-box">
</section>
<section class="box blue-box">
</section>
<section class="box violet-box">
</section>
<section class="box black-box">
</section>
<section class="box yellow-box">
</section>
<section class="box grey-box">
</body>
</html>
body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: white;
}
#container {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-end;
}
.box {
padding: 50px;
box-sizing: border-box;
height: 50vh;
width: 5vw;
}
.red-box {
background-color: indianred;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
.violet-box {
background-color: rebeccapurple;
}
.black-box {
background-color: black;
}
.yellow-box {
background-color: yellow;
}
.grey-box {
background-color: grey;
}
Related
Is there a way I could attain a 2 1 alignment? Trying to achieve this via flexbox, But there doesn't seem to be an option for this directly in flexbox.
I'm looking to achieve the alignment 2 in a row and 1 to the right side aligned to the middle of the 2 as follows.
This is the current outcome with my CSS.
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</body>
</html>
My CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
I added a div in you html and a couple of classes, and changed the css a bit:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
justify-content: space-around;
}
.content h4{
margin-bottom: 20px;
color: #DDDDDD;
}
.arrow{
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<div class="content">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
</div>
<i class="fa fa-angle-right arrow"></i>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I need some help to align the div number 3 to always be on the bottom of the container. The right side container has more content but grid makes both the same size. Left container uses flex.
Since flex-direction is column, I tried to justify-self: flex-end for div number 3 but it's not working, but align-self: flex-end works, the other divs are centered while 3 is on the right.
How can I fix this?
body{
display: grid;
grid-template-columns: 1fr 1fr;
}
div.d {
width: 200px;
height: 200px;
background-color: red;
margin:20px;
font-size:50px;
text-align: center;
}
.flex{
border:1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
.second{
height:900px;
border:1px solid black;
}
.this{
justify-self: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex">
<div class="d">1</div>
<div class="d">2</div>
<div class="d this">3</div>
</div>
<div class="second">
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
</div>
</body>
</html>
Try playing with margins:
body{
display: grid;
grid-template-columns: 1fr 1fr;
}
div.d {
width: 200px;
height: 200px;
background-color: red;
margin:20px 20px 0;
font-size:50px;
text-align: center;
}
.flex{
border:1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
.second{
height:900px;
border:1px solid black;
}
div.this{
margin: auto 20px 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex">
<div class="d">1</div>
<div class="d">2</div>
<div class="d this">3</div>
</div>
<div class="second">
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
CSS: how to position element in lower right?
(2 answers)
Closed 4 years ago.
I want that the child <p> element should take all height of the parent div tag and I could put p element text in the bottom right corner of the parent element.
I have used bootstrap and the following code.
<!DOCTYPE html>
<html><head>
<title>Lynda Training</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle.</p>
</div>
</header>
</div>
</div>
<div class="row">
<div class="container">
<header class="bgimage">
</header>
</div>
</div>
<script type="text/javascript" href="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
</body>
</html>
styles.css:
body, html {
margin:0;
padding:0;
}
.container-fluid .bgimage, .container .bgimage {
background-image: url("/images/bottle.jpg");
background-position: center center;
background-size: cover;
height: 400px;
}
.container p {
color: white;
flex-flow: column;
text-align:right;
height: 400px;
vertical-align: text-bottom;
}
The text hangs up towards the top right corner.
Flexbox can do that.
.container-fluid .bgimage {
background: pink;
height: 100px; /* for demo purposes */
display: flex;
flex-direction: column;
}
.container {
flex: 1;
}
p {
background: lightblue;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container-fluid">
<header class="bgimage">
<div class="container">
<p>This is the image of the bottle</p>
</div>
</header>
</div>
</div>