flex、Grid布局 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

• 1.flex布局

  • 1.1flex布局优缺点

    • 操作方便，布局极为简单，在移动端应用很广泛
    • PC端浏览器支持情况较差

  • 1.2适用场景

    • 如果是移动端或者不考虑兼容性问题的PC端页面布局，建议使用flex弹性布局
    • 如果是PC端页面布局，建议使用传统布局

  • 1.3布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

    • 任何一个容器都可以指定为flex布局
    • 当我们为父盒子设为flex布局以后（display:flex;），子元素的float、clear和vertical-align属性将失效
    • 采用flex布局的元素，称为Flex容器，简称容器。它的所有子元素自动成为容器成员，称为Flex项目，简称项目

  • 1.4 flex布局常见属性

    • 1.4.1flex布局父项常见属性

      • 1.4.1.1flex-direction：设置主轴方向

        • 1.4.1.1.1主轴与侧轴

          • 在flex布局中，是分为主轴和侧轴两个方向 ，其他叫法有：行和列、x轴和y轴（如下所指为默认方向）

            • 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

        • 1.4.1.2justify-content属性

          • justify-content属性用于设置主轴上的子元素排列方式（一定要先确定主轴是哪个）

        • 1.4.1.3flex-wrap属性

          • flex-wrap属性用于设置当项目在一条轴上排不下，如何换行（存在压缩问题）

        • 1.4.1.4align-items属性

          • align-items属性设置侧轴（默认是y轴）上的子元素的排列方式（单行）

            • 注意：交叉轴类似于四象限的平面直角坐标系

        • 1.4.1.5align-content属性

          • align-content属性设置侧轴（默认是y轴）上的子元素的排列方式（多行）
          • 设置子项在侧轴上的排列方式并只能用于子项出现换行的情况（多行），在单行下是没有效果的

        • 1.4.1.6flex-flow属性

          • flex-flow属性是flex-direction和flex-wrap属性的复合属性
          • 把设置主轴方向和是否换行（换列）简写，如flex-flow：column wrap；

    • 1.4.2flex布局子项常见属性

      • 1.4.2.1 flex属性（应用广）

        • flex属性定义子项目分配剩余空间，用flex来表示占多少份数（应用于左右侧固定-给定宽度时，中间自适应设计）

          • 注意：若要求所有项目都实现自适应效果，则对每一个项目都用flex分配份数即可实现随着窗口大小等比例进行缩放的效果

      • 1.4.2.2align-self属性

        • align-self属性控制子项自己在侧轴上的排列方式

          • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

      • 1.4.2.3order属性

        • order属性定义项目的排列顺序

          • 数值越小，排列越靠前，默认为0（第一个项目的order值默认为0，将第二个项目的order值改为-1就可以实现排列向前的效果）

            • 注意：和z-index不一样

• 2.Grid布局

  • 2.1Grid布局

    • Grid布局即网格布局，是一种二维布局方式，可以同时控制行和列的排布和对齐方式。
    • Grid由水平线和垂直线构成。两条水平线的中间区域叫做行轨道，两条垂直线的中间区域叫做列轨道

  • 2.2对外层容器添加Grid属性

    • 对外层容器添加Grid属性，容器的直接子元素就自动成为Grid布局的子元素

  • 2.3Grid属性实例

    • 2.3.1将原布局改成三列布局

      • 2.3.2将固定宽度改成浮动宽度（fr为grid布局专用单位，表示份数）

      • 2.3.3设置列间距、设置行间距（colunm-gap、row-gap）

        • 注意：可以直接用gap属性统一设置行列间距，gap：24px；

      • 2.3.4排列元素（grid-template-areas）

        • 各个元素分别指定对应的区域
      • 2.3.5对齐方式（垂直、水平方向上对齐子元素）
      • 2.3.6如果行轨道和列轨道的尺寸小于grid容器，可以对轨道进行对齐