CSS弹性盒模型 display:flex；常用参数和常见的布局

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%;
  }
}

常见的布局封装

已绑定到资源上，需要的可以自己下载

这篇好文章是转载于：学新通技术网