前端基础青训营文章打卡：Day3

今天的课程主要讲解了CSS中的内容，看完课程之后我主要去重新了解了一下flex布局，并且去学习了grid布局，掌握这两种布局之后我们在之后的排版中可能会更加轻松。

一.grid布局

1.网格容器

通过grid布局我们可以将一个容器划为网格容器，例如下图这种

联想截图_20230729170450.png

这在页面布局方面会对我们有极大的帮助。下面是一个普通的容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a{
        border: 1px solid #999;
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        margin: 0 auto;

    }
    .a div{
        background-color: pink;
        border-radius: 10px;
    }
</style>
<body>
    <div class="a">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

联想截图_20230729170739.png

下面我们将对其进行网格化
首先对容器添加display: grid;,然后我们可以通过grid-template-columns和grid-template-rows 来规定网格容器的行和列

grid-template-columns:100px 100px 100px;//指定三列100px
grid-template-rows:100px 100px ;//指定两列100px

联想截图_20230729171238.png

对于网格容器的列和行有一个特殊的单位fr，相当于对于父元素的占比

grid-template-columns:1fr 1fr 1fr ;
grid-template-rows:1fr 1fr ;

联想截图_20230729171410.png

fr也可以配合px一起使用

grid-template-columns:100px 1fr 1fr ;
grid-template-rows:1fr 1fr ;

联想截图_20230729171623.png

2.网格线

联想截图_20230729204426.png

可以看到每条线都对应着一个数字，通过这个数字我们可以规定网格子元素的起始位置关键字有

grid-column-start grid-column-end grid-row-start grid-row-end

.a div:nth-child(1){
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .a div:nth-child(2){
        grid-column-start: 3;
        grid-column-end: 4;
    }
    .a div:nth-child(3){
        grid-row-start: 1;
        grid-row-end: 1;
    }

联想截图_20230729204920.png

可以看到我们可以通过start规定起始线，然后通过end规定截止的地方，这中间的位置就是该子元素的区域，而且我们可以看到规定网格区域可以脱离正常排序。

3.网格间距

可以通过grid-row-gap和grid-column-gap规定子元素的间距

grid-row-gap: 5px;
grid-column-gap: 5px;

联想截图_20230729210559.png

grid-gap可以同时设置行列的间距

grid-gap: 5px;

效果同上

二.flex布局

flex布局是规定一个弹性容器，里面的子元素跟随父元素的宽度改变而改变
flex布局默认规定横方向为主轴，竖方向为侧轴，元素默认在侧轴方向自动拉伸

将上文的容器改为flex后

display: flex;

联想截图_20230729211542.png

给子元素添加flex属性，属性值为数字，一个子元素的flex值与此父元素内的所有子元素flex值加起来的和的比值就是它占父元素的大小

.a div:nth-child(1){
        flex: 5;
    }
    .a div:nth-child(2){
        flex: 3;
    }

联想截图_20230729212341.png

或者给父元素添加属性justify-content属性

display: flex;
justify-content: center;

自动居中

 display: flex;
justify-content: flex-start;

在起点排列

 display: flex;
justify-content: flex-end;

在末尾排列

display: flex;
justify-content: space-between;

间隔相等自动排列

display: flex;
justify-content: space-around;

左右两边的子元素同样也会与父元素有间距

总结

今天看到视频中讲到的flex和grid，我重新复习一遍flex的基本内容，同时这是我第一次见到grid布局，对grid布局有了一定的基本了解

前端基础文章打卡Day3 :深入理解CSS之flex和grid ｜ 青训营