HTML5布局技术：从Flex到Grid的深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42710036/article/details/129161533

文章目录

一、逐帧动画
二、flex弹性盒子
三、少量元素侧轴对齐方式
四、折行侧轴对齐方式
五、项目属性
六、网格布局
七、网格布局的对齐方式
八、网格布局的项目合并

一、逐帧动画

一张背景图，改变back-position-x的位置让他动起来
step-start 逐帧动画
animation: play 0.5s step-start infinite;

二、flex弹性盒子

触发弹性盒子
给父容器添加 display: flex
弹性盒子的特点：
1、父容器添加弹性盒子以后子元素可转换成块元素
2、子元素横向排列了
3、父元素添加弹性盒子后只有一个子元素的时候给子元素添加 margin auto可以上下左右居中。
概念
1、容器（父元素）
2、项目（子元素）
触发完弹性盒子后只会影响子元素的排列方式，孙子辈元素不影响。
概念
横轴 x轴横向(水平方向)
纵轴 y轴纵向(垂直方向)

主轴弹性盒定义的方向
侧轴与主轴对立的一个方向

容器属性
触发弹性盒子 display:flex
修改主轴方向 column纵向 row横向（默认）
flex-direction: column;
对齐方式
语法：justify-content
取值：
flex-start：主轴的开始位置(元素挨在一起)
flex-end：主轴的结束位置(元素挨在一起)
center：主轴位置居中(元素挨在一起)
space-around：主轴环绕对齐
space-between：主轴两端对齐

三、少量元素侧轴对齐方式

align-items: stretch(位伸) 默认值，项目没有高度
flex-start：侧轴开始的位置
flex-end:侧轴结束位置对齐
center:侧轴位置中间对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
     
            margin: 0;
            padding: 0;
        }
        .box{
     
            width: 800px;
            height: 900px;
            margin: 0 auto;
            display: flex;
            background-color: black;
            justify-content:space-around;
            align-items: center;
        }
        
        .box span{
     
            width: 100px;
            border: 1px solid red;
            color: white;
            text-align: center;
            font-size: 14px;
        }
        
        
        
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

在这里插入图片描述

四、折行侧轴对齐方式

元素的折行问题
如晒个容器当中放了过多的项目会出现项目挤压的问题，项目原本的宽无法使用。
不想被挤压就进行折行，定义宽度
flex-wrap: wrap/nowrap（默认不折行）
折行后会出现行高的问题如下图：
在这里插入图片描述
折行之后行间距
行间距：align-content 可消除行间距
属性值：
flex-start:侧轴开始位置进行对齐（几行挨在一起的）
flex-end:侧轴结束位置进行对齐（几行挨在一起的）
center: 侧轴中心对齐
space-around:侧轴环绕对齐
space-between:侧轴两端对齐
stretch:拉伸(默认值)