Flexbox Properties
1. Parent Properties:
- display: Defines a flex container.
- flex-direction: Defines the main axis direction.
- flex-wrap: Allows items to wrap onto multiple lines.
- flex-flow: Shorthand for
flex-directionandflex-wrap. - justify-content: Aligns items along the main axis.
- align-content: Aligns items along the cross axis.
- align-items: Aligns multiple lines of items on the cross axis.
2. Children/Flex-items Properties:
- order: Changes the order of items without altering the source order.
- flex-grow: Allows an item to grow to fill available space.
- flex-shrink: Allows an item to shrink if there’s insufficient space.
- flex-basis: Defines the initial size of an item.
- flex: Shorthand for
flex-grow,flex-shrink, andflex-basis. - align-self: Aligns a single item within the flex container.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
display:flex;
align-items: center;
justify-content: center;
color: green;
font-size: 50;
}
h2 {
margin: 10px;
}
</style>
</head>
<body>
<h2>CSS Flexbox</h2>
<h2>and Its Properties</h2>
</body>
</html>
CSS Flexbox and Its Properties
CSS Flexbox, or Flexible Box Layout, is the layout model designed to create flexible and responsive layout structures without using float or positioning. By applying display: flex to a parent container, it becomes a flex container, and its children become flex items. This allows control over the items’ growth, shrinkage, and space distribution.
Note: Not all browsers support the flexbox properties, so make sure that the browser you are using supports this property.