- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 work with Flexbox elements in CSS?
Define a flex container and set the flex items in it.
You can try to run the following code to learn how to implement Flexbox elements. Q1, Q2, Q3 here are the flex-items. The entire area is Flexbox element
Example
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>
- Related Articles
- Advance CSS layout with flexbox
- How to work with CSS Transitions?
- Solve unknown gap between elements in Flexbox with HTML5.
- CSS Flexbox Layout Module
- Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
- How to get materialize CSS checkbox to work with @Html.CheckBoxFor?
- How to create responsive floating elements with CSS?
- Setting a Fixed Width for Items in CSS Flexbox
- How to select elements with a specified attribute with CSS
- Add shadow to elements with CSS
- Overlap Elements with CSS
- Floating Elements with CSS
- How to select elements with a specified attribute and value with CSS
- Flexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
- How to create a flexbox Layout in HTML?
Advertisements