简单的了解下 Flexbox 与 CSS Grid 两者之间区别及如何使用
前端达人
共 3613字,需浏览 8分钟
·
2021-12-14 18:53
One
Two
Three
.container {
display: flex;
flex-direction: column;
}
One
Two
Three
.container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.one {
grid-column: 1;
grid-row: 1;
}
.two {
grid-column: 1;
grid-row: 2;
}
.three {
grid-column: 1;
grid-row: 3;
}
.container {
display: grid;
grid-template-columns: repeat(2, 50ch);
grid-template-rows: repeat(1, 200px);
gap: 10px;
}
.one {
grid-column: 3;
grid-row: 1 / span 2;
}
.two {
grid-column: 12;
grid-row: 2 / -1;
}
.three {
grid-column: 6;
grid-row: main-end;
}
评论
1140 CSS Grid
1140CSSGrid最适合1280分辨率的屏幕,在一些小的显示器上会自动进行适配。Beyondacertainpointitusesmediaqueriestoserveupamobileversi
1140 CSS Grid
0
Bulma基于 Flexbox 的现代 CSS 框架
Bulma 是一款基于 Flexbox 的现代 CSS 框架。有以下特性:响应式,Bulma 是一个
Bulma基于 Flexbox 的现代 CSS 框架
0