- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Position Element to Bottom of Its Container with CSS Flex
Syntax
The syntax of CSS flex property is as follows −
Selector {
flex: /*value*/
}Example
The following examples illustrate CSS flex property.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
flex-direction: column;
box-shadow: inset 0 0 6px aqua;
margin: 2%;
width: 30%;
height: 15%;
}
#d2, #d3 {
margin-left: 15%;
margin-top: 5%;
box-shadow: inset 0 0 6px green!important;
}
#d4 {
box-shadow: inset 0 0 6px red!important;
margin-top: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">Random text here..</div>
<div id="d2">Hello!!</div>
<div id="d3">Watch this</div>
<div id="d4">Example</div>
</div>
</body>
</html>This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
flex-direction: column;
box-shadow: inset 0 0 6px red;
margin: 2%;
width: 30%;
}
#d2, #d3 {
margin-left: 15%;
border-radius: 50%;
padding: 5%;
box-shadow: inset 0 0 6px green!important;
}
#d4 {
margin-left: 50%;
margin-top: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="d1"><img src="https://images.pexels.com/photos/5512653/pexels-photo-5512653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"><img src="https://images.pexels.com/photos/6032874/pexels-photo-6032874.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /></div>
</div>
</body>
</html>This gives the following output
Updated on 10-Feb-2021 13:12:49
- Related Questions & Answers
- Align the flex items in the bottom of the container in CSS
- CSS flex container properties
- How to specify the bottom position of 3D elements with CSS
- How to set the bottom position of a positioned element with JavaScript?
- How to position text to bottom left on an image with CSS
- How to position text to bottom right on an image with CSS
- Set the flex items vertically from bottom to top with CSS
- Align flex items at the beginning of the container with CSS
- Align flex items at the end of the container with CSS
- Align flex items at the center of the container with CSS
- How to specify the direction of the flexible items inside a flex container with CSS?
- Display the flex lines in the center of the container with CSS
- Display the flex lines in the end of the container with CSS
- Display the flex lines at the start of the container with CSS
- Specify the bottom padding of an element with CSS
Advertisements