×
Night mode
Sign up
Login
Results: 1578
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
justify-content: flex-end
Items are positioned at the end of the container
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
flex-direction: column
The default value of the property is 
row
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
margin: auto CODE 
margin: auto
is an alternative to 
justify-content: center
and 
align-items: center
. Instead of this code on the flex container: 
.container {
    justify-content: center;
    align-items: center;
}
We can use 
margin: auto
the flex item:
.container div {
    margin: auto;
}
(when there is only one flex item)
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
flex-wrap: wrap;
Specifies that the flexible items will wrap if necessary
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
flex-wrap: no-wrap; 
no-wrap
is the default value of the property
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
responsive flex items 
@media (min-width: 900px) {
    .container {
        display: flex;
        justify-content: space-between;
    }
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
several ways to have space between items
Space between items using 
margin-right
property:
.container div {
    margin-right: 40px;
}
.container div:last-child {
    margin-right: 0px;
}
Flex way of space between flex items:
.container {
    display: flex;
    justify-content: space-between;
}
.container div {
    flex-basis: 30%;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
align-items: stretch
Default value of the property is 
stretch
that means all the flex items will be stretched vertically as default
.container {
  display: flex;
  align-items: stretch;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
order
The property is used to reorder flex items. The default value is 
0
. Negative numbers are also accepted
.main-column {
    flex: 3;
    order: 2;
}
.sidebar-one {
    flex: 1;
    order: 1;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
2
flex:1 
flex
property is a shorthand for 
flex-grow
, 
flex-shrink
, and 
flex-basis
. In this case the element with the property is going to take all the available width.
by Valeri Tandilashvili
5 years ago
0
CSS
flex
Flexbox Tutorial (CSS): Real Layout Examples
1
Results: 1578