Відмінності між версіями «Енциклопедія Носівщини:Адаптивність.css»
Матеріал з Енциклопедія Носівщини
(Створена сторінка: →* Адаптивна перша сторінка: * { box-sizing: border-box; } →Container for flexboxes: .row { display: flex; flex-wrap: wrap;...) |
|||
| Рядок 1: | Рядок 1: | ||
/** Адаптивна перша сторінка */ | /** Адаптивна перша сторінка */ | ||
| + | /** https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex */ | ||
| + | |||
* { | * { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Поточна версія на 12:50, 7 грудня 2020
/** Адаптивна перша сторінка */ /** https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex */
- {
box-sizing: border-box;
}
/* Container for flexboxes */ .row {
display: flex; flex-wrap: wrap;
}
/* Create four equal columns */ .column {
flex: 25%; padding: 20px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
