×
Night mode
Sign up
Login
Results: 1580
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
flex-grow property CODE
In this example, 
.logout
item will grow twice as quick as 
.home
item
.home {
    flex-grow: 1;
}
.logout{
    flex-grow: 2;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
flex-wrap: nowrap 
nowrap
is the default value of the property. The value Specifies that the flexible items will not wrap. Resource: https://youtu.be/k32voqQhODc?t=1154
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
align-self: flex-end
The element is positioned at the end of the container
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS
1
align-self: flex-start
The element is positioned at the beginning of the container
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
absolute centering using flex properties 
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
flex: 1 - for only several items
When only several items need to grow
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
more specific selector CODE 
.flex-container > div {
  flex:2;
}
The selector above has class name and tag name, therefore it's more specific than this selector:
.search {
  flex:4;
}
That's why the second selector has no effect in this example. With more specific selector, like this:
.flex-container .search {
  flex:4;
}
the .search item will be twice as wide as the other flex items.
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
2
flex: 1
When all the flex items have the same 
flex
value, they will take the same space and will shrink and grow equally
.container div {
    flex: 1;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
1
flex:1 as shorthand 
.flex-item:nth-child(1) {
  flex:1;
}
The above 
flex
property is a shorthand of the following properties:
.flex-item:nth-child(2) {
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
}
In the example, the first two elements have the same effect
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Flexbox Course
2
justify-content: space-between
Items are positioned with space between the lines
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS
1
Results: 1580