这是我参与「第四届青训营」笔记创作活动的的第3天,今天主要分享cssFlex、Grid和Position布局快速上手笔记.本文主要围绕css三大布局进行内容梳理，并且每个布局都带有一个案例，帮助大家快速上手css布局.

一、本堂课主要内容:

1. Flex（弹性布局）：Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为Flex布局.

2. Grid（网格布局）：`Grid` 布局即网格布局，是一种新的 `CSS` 布局模型.

3. Position(三种常用)：元素可以使用的顶部，底部，左侧和右侧属性定位.

4. 通俗易懂地掌握任意内容水平垂直居中、网站整体布局模板、导航一键栏固定、传统对联广告排版.

二、详细知识点：

Flex布局

Flex布局是弹性布局，想要使用Flex布局，需要一个父级元素包裹子元素，子元素自然就可使用Flex布局了,见代码；

HTML代码讲解：类名为container是q1、q2、q3的父级元素,只需使用类名选择器将container的display设置为Flex，q1、q2、q3就是Flex布局了.

CSS代码讲解：使用类选择器将container的display设置为Flex即可激活Flex布局,其中justify-content:center;是设x轴方向的排列方式（官方术语是主轴）,center是居中的意思；既然有x轴肯定就有y轴，y轴是align-items：center来设置的；当然有同学肯定会说，x和y轴怎么区分阿？当然默认情况justify-content设置就是x轴，align-items设置就是y轴,下面会说怎么修改x轴.

    <div class="container">
        <div class="q1">one</div>
        <div class="q2">two</div>
        <div class="q3">three</div>
    </div>

.container{
        display: flex;
        justify-content: center;
        align-items: center;
}

通过上面的代码相信你已经明白Flex布局如何激活了，就是一个父级元素包裹子元素，父级元素设置display为flex即可.接下来聊聊Flex里面的参数。

justify-content属性

这个属性和align-items属性需要搞懂到底是x轴作为主轴还是y轴作为主轴；可以配合下一个属性flex-direction进行学习x轴、y轴.x轴作为主轴就是flex-direction属性为row（行）；y轴作为主轴就是flex-direction属性是colunm（列的意思）；其实根据字面意思可以帮助记忆行就是横排列即为x轴、列就是竖着排列即为y轴.

弄懂哪个轴作为主轴就可以进行学习justify-content属性了:这个翻译过来的意思是确定内容，进一步理解就是确定内容的排列方式基于主轴到底是如何排列.

justify-content有这么多: flex-start | flex-end | center | space-between |
space-around;

下面均加了margin-right为了效果好看。

图1 justify-content属性:flex-start(默认值)

图2 justify-content属性:flex-end

图3 justify-content属性:center

图4 justify-content属性:space-between（介于俩着之间）

图5 justify-content属性:space-around

flex-direction属性

这个属性就是修改x和y轴的，默认情况下我们justify-content设置的是x轴当使用flex-direction修改就会发生变化，x轴就变为了y轴，也就是改变了主轴，主轴不再是x轴而是y轴，也就是说justify-content设置的是y轴的排列方式了，也就是垂直方向的排列；align-items: center;这样设置的就是x轴的水平排列方式了.下面是该属性设置的4个值 flex-direction: row | row-reverse | column | column-reverse;下面将一一展示.

图6 flex-direction:row

图7 flex-direction属性:row-reverse

图8 flex-direction属性:column

图9 flex-direction属性:column-reverse

align-items属性

align-items属性也有这么多: flex-start | flex-end | center | baseline | stretch;

图10 align-items属性:flex-start

图11 align-items属性:flex-end

图12 align-items属性:center(垂直居中默认flex-direction为row)

图13 align-items属性:baseline 就是让div里的字体同一高度排列

图14 align-items属性:stretch 拉伸div，div未设置高度或者是auto及占满父元素和上一个属性不常用

Grid布局

Grid布局跟Flex布局有相似之处，都需要外部容器（父元素设置display属性）子元素才可以成为对应布局.同时Grid和Flex有些属性是相同的比如justify-content、align-items...下图属性均在父元素设置属性.

初步构建Grid布局

 <div class="grid">
        <div class="col1">col1</div>
        <div class="col2">col2</div>
        <div class="col3">col3</div>
        <div class="col4">col4</div>
        <div class="col5">col5</div>
        <div class="col6">col6</div>
    </div>

        .grid{
            height: 100vh;
            display: grid; 
        }

Grid-template-columns列轨道

通过设置grid-template-columns属性可以将页面分为几行几列，具体是几行几列需要计算，怎么计算呢首先需要看grid-template-columns属性的设置有俩种方式赋值①grid-template-columns:100px 100px 100px②grid-template-columns:1fr 1fr 1fr;第一种方式是将父级元素分为3列每列100像素、多少行呢？具体需要看你有多少div子元素了，可以用公式计算(子元素%列数)+1行. 第二种方式是fr浮动，都是1倍也就是说每列占33.3%。这里有点绕继续看，grid-template-columns:2fr 1fr 2fr,第一列占40%第二列占20%第三列占40%，下文有具体介绍.

图15 Grid-template-columns:200px 200px 200px

图15 Grid-template-columns:1fr 1fr 1fr
通过该属性有俩种分列的方法.

row-gap、column-gap、gap间隔

图16 row-gap:100px

图17 column-gap:100px

图18 gap:100px行列各隔100px

justify-contetn、align-itmes属性一模一样，读者可以自行尝试.

Grid和Flex的justify-contetn、align-itmes属性一模一样，读者可以自行尝试. 只需 justify-content: center; align-items: center;

图19 水平-垂直方向的居中

justify-items、align-content行列轨道对其方式

使用这俩个属性前提条件是父级元素的尺寸必须小于子元素的大小.

图20 justify-items: center行轨道水平居中

图21 align-content: center列轨道垂直居中

图22 水平垂直均居中跟Flex的居中一样

position定位

position定位一共有五种，默认值是stati,下面是菜鸟教程的介绍.本文详解relative、fixed和sticky.

static

relative

fixed

absolute

sticky

图23 未设置position

图24 设置position:relative;left:100px

图25 fixed固定位置 scroll未滚动

图26 fixed固定位置 scroll滚动

图27 sticky定位滑动前

图28 sticky定位滑动后

三、实践例子：

自由居中排版-Flex

图29 Flex水平垂直居中布局

<!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>
    <style>
        body{
            background-color: navajowhite; 
        }
        .container{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .word{
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
            background-color:cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="word">Flex</div>
    </div>
</body>
</html>

网站整体布局-Grid

图30 网站整体布局

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .layout{
            display: grid; /* 1.设置 display 为 grid */
            width: 100%;
            height: 100vh;
          
            grid-template-areas: 
            "header header header"
            "sidebar content content"
            "footer footer footer";
        }
        header{
            grid-area: header;
            background-color: cyan;
            text-align: center;   
            font-size: 25px;
        }
        aside{
            background-color: antiquewhite;
            grid-area: sidebar;
            text-align: center;
            font-size: 25px;
        }
        main{
            grid-area: content;
            background-color: azure;
            text-align: center;
            font-size: 25px;
        }
        footer{
            grid-area: footer;
            background-color:darkgrey;
            text-align: center;
            font-size: 25px;
        }
        div *{
            border: 2px solid seashell;
            margin: 2px 4px;
        }
    </style>
</head>
<body>
    <div class="layout">
        <header>头部</header>
        <aside>侧边栏</aside>
        <main>内容</main>
        <footer>底部</footer>
    </div>
</body>
</html>

导航栏一键固定、传统对联广告-Position

导航栏-sticky

图31 导航栏滑动前

图32 导航栏滑动后

<!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>
   <style>
       *{
           padding: 0;
           margin: 0;
       }
       body{
           height: 1000px;
       }
       .left{
           width: 150px;
           height: 400px;
           position: fixed;
           top:110px;
           left: 2px;
           background-color: cornflowerblue;
       }
       .right{
           width: 150px;
           height: 400px;
           position: fixed;
           top: 110px;
           right: 2px;
           background-color: cornflowerblue;
       }
   </style>
</head>
<body>
   <div class="left">左边广告</div>
   <div class="right">右边广告</div>
</body>
</html>

对联广告-fixed

图33 对联广告


 <!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"
     <titleDocument</title
     <style
         *{
             padding: 0;
             margin: 0;
         }
         body{
             height: 1000px;
         }
         .left{
             width: 150px;
             height: 400px;
             position: fixed;
             top:110px;
             left: 2px;
             background-color: cornflowerblue;
         }
         .right{
             width: 150px;
             height: 400px;
             position: fixed;
             top: 110px;
             right: 2px;
             background-color: cornflowerblue;
         }
     </style
 </head
 <body
     <div class="left"左边广告</div
     <div class="right"右边广告</div
 </body
 </html

四、课后个人总结：

通过学习本章节css基础和进阶部分，让我熟练掌握了css基础语法，以及页面布局，通过实战的形式，帮助我巩固加强了基础，捋清思路，帮助快速上手的同学,写笔记也是复习的好方法.

五、引用参考：

菜鸟教程css板块

哔哩哔哩视频

加油，预告明天笔记-js基础.

Css基础之页面布局Flex、Grid3分钟上手 | 青训营笔记

一、本堂课主要内容:

1. Flex（弹性布局）：Flex是Flexible Box的缩写，意为”弹性布局”， 任何一个容器都可以指定为Flex布局.

2. Grid（网格布局）：Grid 布局即网格布局，是一种新的 CSS 布局模型.

3. Position(三种常用)：元素可以使用的顶部，底部，左侧和右侧属性定位.

4. 通俗易懂地掌握任意内容水平垂直居中、网站整体布局模板、导航一键栏固定、传统对联广告排版.

二、详细知识点：

Flex布局

justify-content属性

下面均加了margin-right为了效果好看。

flex-direction属性

align-items属性

Grid布局

初步构建Grid布局

Grid-template-columns列轨道

row-gap、column-gap、gap间隔

justify-contetn、align-itmes属性一模一样，读者可以自行尝试.

justify-items、align-content行列轨道对其方式

position定位

三、实践例子：

自由居中排版-Flex

网站整体布局-Grid

导航栏一键固定、传统对联广告-Position

导航栏-sticky

对联广告-fixed

四、课后个人总结：

五、引用参考：

1. Flex（弹性布局）：Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为Flex布局.

2. Grid（网格布局）：`Grid` 布局即网格布局，是一种新的 `CSS` 布局模型.