@coder 1517
CSS3 RESPONSIVE UI
2021-11-17 00:31 · 4 min read
A Responsive UI is a user interface that is adjustable on all devices. We can check the responsiveness of a website by changing the browser view size. Here we will discuss the responsiveness of a web page.
What is CSS3 Flexible Container Layout?
CSS3 Flexible layout is used to design flexible responsive layouts for different devices. We can easily design a website with different views by using CSS3 display: flex property.
SYNTAX
- display: flex;
<style>
.tdb-flex{
display:flex;
}
</style>
HTML CODE
<body>
<div class="tdb-height">
<div class="tdb-div1">DIV1</div>
<div class="tdb-div2">DIV2</div>
</div>
</body>
Note: You can also use Grid Layout for responsive web designs.
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-flex{
display:flex;
color:white;
padding:10px;
text-align:center
}
.tdb-div1{background-color:red;
width:50%}
.tdb-div2{background-color:black;
width:50%}
</style>
</head>
<body>
<div class="tdb-flex">
<div class="tdb-div1">DIV1</div>
<div class="tdb-div2">DIV2</div>
</div>
</body>
</html>
Flex Container Properties
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
These are the properties we use for a flexible layout.
Example
<style>
.tdb-flex{
display:flex;
flex-direction: column;
}
</style>
Note: You can also use Grid Layout for responsive web designs.
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-flex{
display:flex;
padding:10px;
text-align:center;
flex-direction: column;
}
.tdb-div1,.tdb-div3{background-color:pink;
width:50%}
.tdb-div2{background-color:orange;
width:50%}
</style>
</head>
<body>
<div class="tdb-flex">
<div class="tdb-div1">DIV1</div>
<div class="tdb-div2">DIV2</div>
<div class="tdb-div3">DIV3</div>
</div>
</body>
</html>
TAGS:
POPULAR POSTS
best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
