CSS弹性盒模型
- display:flex;常用参数
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
- align-content
- order
- flex-grow
- flex-shrink
- flex-basis
- 常见的布局
- 1. 水平居中
- 2. 垂直居中
- 3. 水平垂直居中
- 4. 等分布局
- 5. 响应式布局
- 6. 网格布局
- 常见的布局封装
display:flex;常用参数
display:flex; 是CSS中用于创建弹性盒子布局的属性,其常见的各种参数及用法包括:
flex-direction
指定主轴的方向,可以是row(水平方向)、column(垂直方向)等。
justify-content
定义在主轴上的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、space-between(两端对齐,中间间隔相等)等。
align-items
定义在交叉轴上的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、stretch(拉伸填满)等。
flex-wrap
指定如何换行,可以是nowrap(不换行)、wrap(换行,第一行在上方)、wrap-reverse(换行,第一行在下方)。
flex-flow
是flex-direction和flex-wrap的缩写,可以同时指定主轴方向和换行模式,例如flex-flow: row wrap;。
align-content
定义多行情况下的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、space-between(每行之间相等间隔)、stretch(拉伸填满)等。
order
指定弹性子元素的排列顺序。
flex-grow
定义弹性子元素的放大比例。
flex-shrink
定义弹性子元素的缩小比例。
flex-basis
定义弹性子元素的基准大小,通常是一个固定值或一个百分比。
以上是常见的display:flex;的参数及用法,还有一些其他的参数可以参考相关文档。
常见的布局
display:flex;
是 CSS 中一种强大的布局方式,以下是一些常见的 display:flex;
组合布局:
1. 水平居中
.container {display: flex;justify-content: center;
}
2. 垂直居中
.container {display: flex;align-items: center;
}
3. 水平垂直居中
.container {display: flex;justify-content: center;align-items: center;/* 或者可以使用下面这种方式 *//* align-items: stretch;align-content: center; */
}
4. 等分布局
.container {display: flex;justify-content: space-between;
}
5. 响应式布局
.container {display: flex;flex-direction: row; /* 默认值 */
}@media screen and (max-width: 768px) {.container {flex-direction: column;}
}
6. 网格布局
.container {display: flex;flex-wrap: wrap;
}/* 4列布局 */
.item {width: 25%;
}/* 3列布局 */
@media screen and (max-width: 768px) {.item {width: 33.33%;}
}/* 2列布局 */
@media screen and (max-width: 480px) {.item {width: 50%;}
}
常见的布局封装
已绑定到资源上,需要的可以自己下载