跳到主要内容

3.1-flex和grid布局

Create by fall on — — 2020 Recently revised in 28 11 May 2024

flex布局​

在当前元素使用：display: flex 元素内的排列方式就是 flex 布局。

对于采用 flex 布局的内容，父元素和子元素都有一套不同的配置，可以根据需要对元素进行操作。

父元素样式​

使用 display: flex 后，就表明浏览器采用 flex 布局

排列方向​

flex-direction 内部盒子的排列方向

  • row：从左往右进行排列（默认）
  • row-reverse：从右往左排列
  • column：从上往下排列
  • column-reverse：从下往上排列

flex-wrap 表示子项单行显示还是换行显示

  • nowrap：默认不折行（如果元素过多，会导致每个元素宽度减少）
  • wrap：换行
  • wrap-reverse：即超出部分向上换行

flex-flow：同时表示 flex-wrap 和 flex-direction 的缩写。

.father{
  display:flex;
  flex-flow:wrap row;
}
.father2{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
}

对齐方式​

控制 flex 内元素排列的位置

justify-content 内部盒子方向（flex-direction方向）元素和元素之间的中间距的铺开方式。

align-content：另一个方向的元素间距对齐式（该元素仅在多行中生效，即 flex-wrap:wrap）对齐属性可选值大同小异。

place-content：控制 align-content 和 justify-content

  • flex-start：（排列方向）起始位置对齐
  • flex-end：结束位置对齐
  • center：居中对齐
  • space-between：剩余空间在元素之间分配（盒子边缘和父容器接触）
  • space-around：剩余空间在每个盒子两侧均匀生成
  • space-evenly：所有空白间距相等（盒子边缘和父容器不接触）
<style>
  .child {
    height: 200px ;
    width: 200px ;
    background-color: cyan;
    margin: 10px;
  }
  .father {
    display: flex;
    flex-flow: row wrap;
    height:600px;
    background-color: chartreuse;
    align-content: center;/*flex-flow 为 row ，就是 column 方向向上的间距如何展示*/
    justify-content:center;/*flex-flow 为 row ，就是 row 方向向上的间距如何展示*/
  }
</style>
<div class="father">
  <div class="child"></div>
  <div class="child" style="height: 120px ;"></div>
  <div class="child"></div>
</div>

align-items：控制该行内容的对齐方式（单行内容元素高低不一时，是中心对齐还是上部对齐，或者是底部对齐）可选值：

  • baseline：文字的基准线对齐
  • center：中心对齐
  • end：底部对齐
  • flex-end：底部对齐
  • flex-start：底部对齐
<style>
  .child{
    height: 200px ;
    width: 200px ;
    background-color: cyan;
    margin: 10px;
  }
  .father{
    display: flex;
    flex-flow: row wrap;
    height:600px;
    background-color: chartreuse;
    align-content: center;
    align-items: baseline;
  }
</style>
<div class="father">
  <div class="child"></div>
  <div class="child" style="height: 120px ;width: 120px;"></div>
  <div class="child" style="height: 120px ;width: 120px;"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child" style="height: 120px ;width: 120px;"></div>
</div>

排列间距​

通过 gap 属性，可以设置元素与元素之间的间距

<div class="father">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<style>
  .father{
    display:flex;
    gap:20px;
  }
  .child{
    height:80px;
    width:80px;
    background:magenta;
  }
</style>

子元素样式​

通过控制 flex 子元素上面的属性，来进行布局

flex-grow：当容器空间有空余时，扩展各个子项所占的宽度 默认值为 0，分配的值和为 1 时全部扩展，有两项以上大于1，则按比例进行分配。

flex-shrink：空间不足的时候，单个元素的伸缩比例(容器空间没空余) 默认值为 1，数值越大，收缩越强烈。

flex-basis：分配剩余空间之前元素的默认大小，优先级高于 width/height 随着排列方式的不同而改变，上下排列相当于height ，左右排列相当于 width。

flex：分别表示 flex-grow、flex-shrink、flex-basis

order ：改变某一个子项的排序位置，默认值为 0，值越大越靠后

align-self：单独某一个子项的垂直对齐方式，align-items 的单元素控制。

grid 布局​

CSS 网格中使用的一些基本属性是：display、grid-template-columns、grid-template-rows、grid-column、grid-row 和 gap。

父元素样式​

行列模版​

grid-template-rows：设置行数，grid 布局中的行数。

grid-template-columns：设置列数，grid 布局中总共有几列。

.grid-father {
	grid-template-rows:100px 200px 100px; /* 总共有三行内容，行高分别为 100px 200px 100px */
  grid-template-columns: 100px 200px 100px;	 /* 分为三列，列宽分别为 100px 200px 100px */
}
/* 
  grid-template-column:1fr 1fr 1fr 1fr;可以写成 grid-template-column:repeat(4 , 1fr)
  1fr 相当于当前面积的 当前fr/所有fr，如果和小于1fr，则只占未分配面积的多少
  当总 fr 数小于 1 时，所占面积为对应的数值，如果大于 1 则是剩余面积的对应比例
*/

grid-template-areas：指定 grid 布局的区域

/* 
  grid-template-areas 指定 grid 布局中的区域 
  需要配合子组件中的 grid-area 进行使用
*/
.grid-father {
  grid-template-areas:
    "a1 a1 a1"
    "a2 a2 a3"
    "a2 a2 a3"
}
/* 然后选择盒子，添加 grid-area:a1 属性(以及a2、a3) */
.grid-child {
  grid-area: a1;  /* 不需要引号 */
}

grid-template 复合属性书写 grid-template-row、grid-template-column、grid-template-area

grid-template: 
            "a a a" 40px
            "b c c" 40px
            "b c c" 40px / 1fr 1fr 1fr;

排列方向​

通过 grid-auto-flow 控制元素的排列方向。

  • row（默认值）：逐行排列的方式进行填充
  • column：逐列方式进行排列
  • dense（可选值）：主动向前填充空白，如果前方的空白足够排列，将会自动向前补充（导致顺序不一致）

对齐方式​

元素排列方式

justify-content（元素的排列方向）和 align-content（元素排列）place-content（align-content、justify-content）

  • flex-start：（排列方向）起始位置对齐
  • flex-end：结束位置对齐
  • center：居中对齐
  • space-between：剩余空间在元素之间分配（盒子边缘和父容器接触）
  • space-around：剩余空间在每个盒子两侧均匀生成
  • space-evenly：所有空白间距相等（盒子边缘和父容器不接触）
.grid-father{
  place-content:center stretch;
  justify-content:stretch;
  align-content:center;
}

元素对齐方式

有三个控制元素排列的属性：justify-items、align-items、place-items（控制 align-items 和 justify-items）

属性的值大同小异：

  • flex-start：起点对齐
  • flex-end：末端对齐
  • center：居中对齐
  • stretch：元素小于容器大小，将元素增大到容器的大小，同事保持宽高比例的约束
.grid-father{
  place-items:center stretch;
  justify-items:stretch;
  align-items:center;
}

排列间距​

.grid-father{
  gap: 10px 20px;
  // 等价于下面的
  // row-gap:10px;
  // column-gap:20px;
}

子元素​

元素位置​

控制子元素的位置

grid-column-start（元素开始的列）、grid-column-end（元素结束的列）grid-row-start（元素开始的行）grid-row-end（元素结束的行）

.grid-child {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

grid-column：grid-column-end 和 grid-column-start 的简写，使用 / 隔开

grid-row grid-row-start 和 grid-row-end 的简写 数值用 / 隔开

上面的写法简写后是

.grid-child {
  grid-column: 1 / 2;
  grid-row-start: 1 / 3;
}
// 示例，父渲染 12 列
.grid-exapmle-father{
  grid-template-columns:repeat(12,1fr);
}
// 从第三列开始，共渲染 8 个方格
.grid-example-child {
  grid-column: 3 / span 8;
  // 等价于
  // grid-column: 3 / 12;
}

grid-area 表示 grid-row 和 grid-column 两个的复合写法

顺序：grid-row-start、grid-column-start、grid-row-end、grid-column-end

.grid-child1 {
  grid-area: 1 / 1 / 4 / 2;
  // 等价于
  // grid-column: 1 / 2;
  // grid-row: 1 / 4;
  // 等价于
  // grid-row-start: 1;
  // grid-column-start: 1;
  // grid-row-end: 4;
  // grid-column-end: 2
}

对齐方式​

align-items、justify-items 提供了默认的对齐方式，可以使用 align-self、justify-self 针对每一个元素进行单独排列

place-self 同时表示 align-self 和 justify-self 的简写方式

.grid-child {
  align-self:center;
  justify-self:center;
}

grid 示例​

可以使所有的子元素在中心对齐

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

参考文章​

作者链接
MDN 官方文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
MDN 官方文档网格布局的基本概念