×
Night mode
Sign up
Login
Results: 1580
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
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
@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
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
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
4 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
4 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
4 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
4 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
4 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
4 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
flex-direction: column
The default value of the property is 
row
by Valeri Tandilashvili
4 years ago
0
CSS
properties
Flexbox Tutorial (CSS): Real Layout Examples
1
Results: 1580