开始

今天的青训营笔记是实践相关!这是我在暑期青训营发布的第二篇笔记,选题是CSS布局技巧.

在本篇文章中,我想要去介绍css布局中的flex与grid布局.flex与grid是现代css中最为常用的两种布局,它们可以轻易的实现我们想要的垂直居中,等距离间隔,布局元素超出窗口长度时自动向下移动等等,操作快捷,使用便利,实乃css布局的优良选择.

flex弹性布局

flex弹性布局分为flex container弹性容器与flex item弹性物品. 它有一条主轴,内部元素会根据主轴方向自动排序,默认为横向排列.

基本属性简介

flex的使用方式相当简单

.flexbox{
    display:flex;
}

添加flex布局后,拥有flexbox样式的元素内部的所有元素都会自动排成一行.如果想要布局为竖向的,只需添加属性如下:

.flexbox{
    display:flex;
    flex-direction: column; /* 改变主轴方向为竖向 */
}

如果要控制布局中的元素间隔,可以使用属性gap

.flexbox{ 
    display:flex; 
    flex-direction: column;
    gap:20px;/* flexbox中所有元素都间隔20px */
}

通过上面的几个属性,我们可以很简单的实现横向/竖向的整齐布局,但是flex都功能远不止于此

垂直居中

flex布局最好用的莫过于垂直居中,我刚学会的时候可太喜欢了,哪里需要垂直居中都想用(后来发现flex的能力是有极限的)

要实现垂直居中非常简单:

.cs{
  display: flex;
    ...
  align-items: center; /*内容对齐方式:居中*/
  justify-content: center; /*元素在主轴的对齐方式:居中*/
}

这里使用了align-items元素对齐方式,justify-content主轴内容对齐两个重要属性,它们能够控制flex items的内容排布方式和布局方式,除了center居中,还有很多属性:

/* 基本位置对齐 */
/*align-content 不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置 flex 元素 */
align-content: flex-end; /* 从终止点开始放置 flex 元素 */

/* 默认对齐 */
align-content: normal;

/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平，
                                 最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目
                                 拉伸‘自动’ - 大小的项目以充满容器 */

/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;

/* 全局属性 */
align-content: inherit; /* 继承 */
align-content: initial; /* 初始值 */
align-content: unset; /* 未设置 */

需要注意,如果使用了flex-direction: column;,那么这两个属性影响的方向会变更.

logo与用户信息分布在导航栏两侧

  <nav class="flexbox">
    <img src="" alt="logo">
    <div class="info">...</div>
  </nav>

.cs{
  display: flex;
    ...
  align-content: space-around; /* 将空白全部填充到flex item的间隔内 */
  align-items: center; /*元素在副轴的对齐方式:居中*/
  justify-content: center; /*元素在主轴的对齐方式:居中*/
}

这里使用了一个新属性align-content,它和justify-content差不多.这个属性规定了元素在主轴如何排列.

以上是flex最基本的使用方式,总共就几个属性,却实现了很多原先复杂的布局操作.flex属于一维布局,可以很好的控制元素在一根轴线上的排列.而grid是二维布局,它规定了元素如何在横向与竖向进行排列.

grid网格布局

grid网格布局与flex弹性布局有些类似,它有着grid container网格容器与grid items网格物品,此外grid cell之间的间隔称为gutters网格线. 网格布局基础属性如下:

.container{
    display:grid;
    grid-template-colums:a,b,c;/*决定每列元素宽度,一个值出现一列*/
    grid-template-rows: 200px 200px 200px;/*决定每行高度*/
    gap:30px;/*间距*/
    cloumn-gap:30px;/*列间距*/
    cloumn-gap:60px;/*行间距*/
}

可以感觉到与flex非常相似,所以就不再过多讲解

grid unit fr

grid有一个重要单位fr,fr用于grid-template-colums等属性.每存在一个fr,就存在一列/行,fr的大小决定占位元素在本行中占据的空间大小

grid-template-colunm: 1fr 1fr 1fr 1fr;
/*简写法*/
grid-template-colunm:repeat{4,1fr}
/*还可以使用minmax,两个参数分别为最小最大值
比如这个是不小于100px,不大于1fr
以及auto,浏览器自己决定长度*/
grid-template-columns: 1fr auto minmax(100px, 1fr);

grid实现圣杯布局

<div class="grid">
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
</div>

.grid{
    display: grid;
    grid-template-columns: 100px 200px 300px;
    grid-template-rows:10px
}
.a{
    background-color: skybule;
}
.b{
    background-color: #fff;
}
.c{
    background-color: grey;
}

此外grid还能修改排序方式,移动布局元素的位置,自动将不能够在当前行展示的元素移动到下一行中,构建响应式布局中也常常用到.

CSS布局技巧的实践 ｜ 青训营

开始