×
Night mode
Sign up
Login
Results: 1580
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
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
@media queries 
@media query
is used for special devices. In the example below 
@media query
is for devices with width less than or equal to 
600px
#main {
    width: 70%;
    float: left;
    padding: 0 30px;
    box-sizing: border-box;
}
#sidebar {
    width: 30%;
    float: right;
    padding: 0 30px;
    box-sizing: border-box;
}
@media(max-width:600px) {
    #main {
        width: 100%;
        float: none;
    }
    #sidebar {
        width: 100%;
        float: none;
    }
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
min-height 
div.mydiv {
  min-height: 100px;
}
The div will start at 100px, if the content pushes the div beyond 100px it will continue growing. However if you have content that takes less than 100px it will still take 100px in space.
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
display:inline
Displays an element as an inline element (like 
<span>
). Any height and width properties will have no effect
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
first-child, last-child, nth-child(), nth-child(even)
We can use 
first-child
to select only the first child element:
.my-list li:first-child {
    background-color: red;
}
last-child
is used to select the last member from the list:
my-list li:last-child {
    background-color: blue;
}
nth-child(5)
is used to select 
nth
element. In the example we select 5th element
.my-list li:nth-child(5) {
    background-color: yellow;
}
We can also use 
nth-child(even)
to select even members from the list
.my-list li:nth-child(even) {
    background-color: grey;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
position:fixed
The element is positioned relative to the browser window
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
position:sticky
An element with position: sticky; is positioned based on the user's scroll position
div.sticky {
  background-color: yellow;
  position: sticky;
  top: 0;
}
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place like 
position:fixed
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS
2
top
The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements (If position is 
static
)
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS
1
position:absolute CODE
The element is positioned relative to its first positioned (not static) ancestor element
.parent {
    position: relative;
}
.parent h1 {
    position: absolute;
    top: 10px;
}
https://youtu.be/aFtByxWjfLY?t=200
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
2
Results: 1580