flex(弹性)布局和grid(网格)布局的区别

zYear
377 阅读5分钟

简介

flex:

  • 布局方式: flex 布局是一维布局，主要运用于对一个容器中内容的横向或纵向布局。
  • 精细度: flex 布局无法对模块内的模块进行精细的位置控制。
  • 适合布局: 适合于对一个模块内布局进行处理，内部的大小可以进行动态的控制。

grid:

  • 布局方式: grid 布局是二维布局，主要运用于对一个容器中内容的横向和纵向布局。
  • 精细度: grid 可以控制各个模块的精准位置，甚至可以在网格内重叠布局。
  • 适合布局: 适合于对整个页面布局的处理，对页面的各个模块进行区域划分。

总结

在实际的开发中，需要将 flex 和 grid 进行联合使用，能够在 flex 布局内使用 grid 布局，从而弥补两种布局各自的缺点。

flex 和 grid 样式介绍

flex 样式介绍

父元素中的 css 样式

  • display: ——开启弹性布局，其子元素受影响

    • flex | inline-flex ;

  • flex-direction: ——决定主轴的方向

    • row(默认:从左到右)
    • row-reverse(从右到左)
    • column(从上到下)
    • column-reverse(从下到上)

  • flex-warp:——是否换行

    • nowrap(默认)
    • wrap(换行)
    • wrap-reverse(换行但行序从下往上)

  • flex-flow: —— 两个样式的简写形式

    • flex-direaction && flex-wrap

  • justify-content: ——主轴上的对齐方式

    • flex-start(默认:从主轴的起始点开始对齐)
    • flex-end(从主轴的终止点开始对齐)
    • center(从主轴的中心对齐)
    • space-around(每个子模块两侧分配相同的空间: 导致首尾子模块两侧的大小是子模块间大小的一半)
    • space-between(均匀排布，首个子模块位于起点，最后一个模块位于终点)
    • space-evenly(每个子模块之间的间隔相同: 不会管首尾子模块两侧的大小)

  • align-item:——副轴(交叉轴)上的对齐方式

    • stretch(默认: 如果子元素未设置高度或高度为 auto ，则占满整个父元素的高度)
    • flex-start(从副轴的起始点开始对齐)
    • flex-end(从副轴的终止点开始对齐)
    • center(从副轴的中心对齐)
    • baseline(以第一个子元素的第一行文字的基线对齐)

  • align-content: ——多轴对齐方式，需要父元素有多轴，否则不起作用

    • flex-start(副轴的起点对齐)
    • flex-end(副轴的终点对齐)
    • center(副轴的中心对齐)
    • space-between(副轴两端对齐：副轴之间的间距相同)
    • space-around(副轴两侧空间相同: 每个副轴两侧的间隔相同)
    • stretch(副轴上的元素对主轴进行一个平均切分)

子元素中的 css 样式

  • order:——子元素的排列顺序:默认为0，数字越小排越前
  • flex-grow:——子元素的放大比例:默认为0，该数值表示在所有子元素中此子元素占多少份，0表示为原子元素的大小
  • flex-shrink:——子元素的缩小比例:默认为0, 该数值表示在父元素空间不足的情况下的缩小比例,0表示不进行缩小，但只有其他子元素都具有数值时该子元素才会保持原大小
  • flex-basis:——子元素的固定大小:默认为 auto ，该数值表示该子元素固定的大小
  • flex:——flex-grow、flex-shrink、flex-basis 的简写形式
  • align-self:——表示该子元素自己的对齐方式:默认为 auto 表示继承父元素的 alig-items ,可以覆盖 align-items
    • flex-start(从副轴的起始点开始对齐)
    • flex-end(从副轴的终止点开始对齐)
    • center(从副轴的中心对齐)
    • baseline(以第一个子元素的第一行文字的基线对齐)
    • stretch(如果子元素未设置高度或高度为 auto ，则占满整个父元素的高度)

grid 样式介绍

父模块中的 css 样式

  • display:——开启网格布局，其子模块受影响
    • grid | inline-grid
  • grid-template-columns——多个数值，一个数值代表一列， auto 代表大小不固定 数值代表大小固定)
    • auto | number
  • grid-template-row——多个数值，一个数值代表一行， auto 代表大小不固定 数值代表大小固定
    • auto | number
  • grid-column-gap——列与列之间的间隔
  • grid-row-gap——行与行之间的间隔
  • grid-gap——每个模块间的间隔
  • grid-template-areas——将单个或多个模块进行区域命名
 grid-template-areas:'a a a' // 这位单独一个区域
                     'a c d' // 这行内分为三个区域
                     'e e f' // 这行分为两个区域
  • justify-items——每个子模块内的内容的水平位置
    • stretch(默认值)
    • start
    • end
    • center
  • align-items——每个子模块内的内容的垂直位置
    • stretch(默认值)
    • start
    • end
    • center
  • place-items——两个样式的简写方法
    • justify-items && align-items
  • justify-content
    • start
    • end
    • center
    • stretch
    • space-around(每个子模块两侧分配相同的空间: 导致首尾子模块两侧的大小是子模块间大小的一半)
    • space-between(均匀排布，首个子模块位于起点，最后一个模块位于终点)
    • space-evenly(每个子模块之间的间隔相同: 不会管首尾子模块两侧的大小)
  • align-content
    • start
    • end
    • center
    • stretch
    • space-around(每个子模块两侧分配相同的空间: 导致首尾子模块两侧的大小是子模块间大小的一半)
    • space-between(均匀排布，首个子模块位于起点，最后一个模块位于终点)
    • space-evenly(每个子模块之间的间隔相同: 不会管首尾子模块两侧的大小)

子模块中的 css 样式

  • grid-column-start——单个模块开始的列分割数
  • grid-column-end——单个模块结束的列分割数
  • grid-row-start——单个模块开始的行分割数
  • grid-row-end——单个模块结束的行分割数
  • grid-column——两个样式的简写方法
    • grid-column-start && grid-column-end
  • grid-area——指定子模块放在哪一个区域
  • justify-self——和 justify-items 用法相同，但仅作用单个子模块
    • start
    • end
    • center
    • stretch
  • align-self——和 align-items 用法相同，但仅作用单个子模块
    • start
    • end
    • center
    • stretch
  • place-self——两个样式的简写方法
    • justify-self && align-self
image.png

例子:

item1{
    grid-column-start:1;
    grid-column-end:3;
}

** 上方代码具体展示为 **

image.png
avatar
文章
阅读
粉丝