×
Clear all filters including search bar
Valeri Tandilashvili's CSS Notes
Results: 126
clearfix with pseudo element CODE 
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
Modern way of clearing floats
element must be block type to be able to clear float 
<i style="display:block;clear:both"></i>
justify-content with flex-direction: column 
justify-content
is always working on a main axis. It means, that when 
flex-direction: column;
, then 
justify-content
property aligns items vertically
flex-shrink property
A number specifying how much the item will shrink relative to the rest of the flexible items. Note: 
Default value is 1
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;
}
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;
}
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.
@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;
    }
}
display
We can convert inline 
label
element to block level element using the code below. So they will take the full width of the container
.my-form label {
    display: block;
}
td padding
The style is used instead of deprecated 
cellpadding
attribute of the table
th, td {
    border: 1px solid black;
    padding: 5px;
}
Results: 126