YouTipCSS3 box-flex Property
CSS Reference Manual
- CSS Reference Manual
- CSS Selectors
- CSS Aural Reference Manual
- CSS Web-safe Fonts
- CSS Animations
- CSS Functions
- CSS Units
- CSS Colors
- CSS Legal Color Values
- CSS Color Names
- CSS Hexadecimal Color Values
- CSS Browser Support
- Sass Tutorial
CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- appearance
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
CSS3 box-flex Property
The box-flex property is used to define the flexibility of a flex item within a flex container.
Syntax
box-flex: <number>;Values
<number>: Specifies the flex factor of the element. The default value is0. A higher number means greater flexibility (i.e., more space it will take).
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
width: 300px;
height: 100px;
background-color: #f1f1f1;
}
.flex-item {
background-color: #4CAF50;
margin: 5px;
color: white;
text-align: center;
line-height: 100px;
font-size: 20px;
}
.item-1 {
box-flex: 1;
}
.item-2 {
box-flex: 2;
}
.item-3 {
box-flex: 3;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item-1">1</div>
<div class="flex-item item-2">2</div>
<div class="flex-item item-3">3</div>
</div>
</body>
</html>This example demonstrates how different values of box-flex affect the size distribution among flex items.
Browser Support
The box-flex property is supported in:
- Chrome 20+
- Firefox 18+
- Safari 6+
- Opera 12.1+
- Internet Explorer 10+
Note: This property has been replaced by the flex property in modern CSS. It is recommended to use flex instead for new projects.