css 布局

原文链接

什么是布局?

就是根据需要,将 dom 元素进行排列。

常规流动布局

常规是什么,常规就是默认,就是啥也不做,事情本来应该是什么样就什么样。所以常规流动布局就是你的 html 文档结构怎么样,就怎么。比如下面的四个矩形,就是按照它们在文档中出现的顺序依次布局的,排列的也是很整齐,没什么不妥。

css 复制代码
<div style="background: black;height: 50px;"></div>
<div style="background: green; height: 50px;"></div>
<div style="background: red; height: 50px;"></div>
<div style="background: blue; height: 50px;"></div>

在常规流动布局中,有块级元素和行内元素两种元素,块级元素宽度自动 100%,行内元素如果不设置的话则视内容多少而定,会按照不同的排列方式依次排列,直到占满换行。

常规布局是日常开始中用到最多的,但也是最容易被忽略的。因为一切都是默认的,除非想用其它布局方式,否则都会当做理所当然,自然也就想不起来。

关于常规流布局,我觉得养成良好的 html 文档写作习惯非常重要。在一开始就把结构梳理好了,能节约大量用来布局的事件。

flex 弹性盒子布局

flex弹性盒子布局是我见过的代码里面用到非常多的一个。那么,什么是 flex 弹性盒子布局呢?

什么是flex 弹性盒子布局?

首先,它是一个布局方式。 那它是什么样的布局方式呢? 是一种可以把元素按行逐个排列的方式,有点类似于正常的流布局。但是它和正常的流布局不同的地方在于,它对每行的空间分配具有非常大的灵活性。既可以对某一行设置固定的宽高,也可以让它基于容器变化。 它还是一种可以改变元素默认的排列方式,让原先逐行排列的布局变成逐列排序。并且可以灵活的分配每列的空间。 它还可以调整元素的显示顺序。

所以,flex 布局就是一种可以按行或者按列布局,且能够灵活分配空间的布局方式

怎么使用flex布局?

  • 首先需要确定需要布局的元素,然后把它们放到一个容器里。

比如下面这四个矩形,现在想用 flex 来重新布局成纵向的。首先需要将它们放到一个盒子里面,并将其 display 属性设置为 flex,使其成为容器。如下

css 复制代码
  <div  class="container">
    <div style="background: black;height: 50px;width: 100px;"></div>
    <div style="background: green;height: 50px;width: 100px;"></div>
    <div style="background: red; height: 50px;width: 100px;"></div>
    <div style="background: blue; height: 50px;width: 100px;"></div>
  </div>

  <style>
    .container{
        display: flex;
    }
  </style>

原先的一列四行一下子变成了一行四列。但是我们又额外的写了一些代码,就是给每一个子元素都加了宽,否则就啥都看不见。这是因为把容器设置为 flex 后,它里面的子元素都会跟着发生变化。这块先搁置一下,继续探索被设置成 flex 的容器。

一个容器被设置成flex 后,默认是按照列来布局的,要改变这一属性,就需要匹配的另外一个属性flex-direction,它的默认值就是 row,也就是按所有内容都放到一行,还有一个参数值叫column,也就是所有内容都放到一列。对应的,它们两个都有一个反转值,也就是row-reverse,column-reverse。下面的例子使用了row-reverse.

这里首先能看到的是矩形的位置做了个反转,但同时整体的位置也发生了调换,直接从左边跳到了右边去了。这是因为当容器被设置成 flex 盒子时,会默认设置两条从左上角出发的线,一条向右,叫主轴main axis,一条向下,叫交叉轴 cross axis,出发点叫 start,结束点叫 end。当把flex-direction的属性值设置为column时,主轴和交叉轴互换。而使用对应的 reverse 时,起点则换到了盒子右上角。因此,这里我们使用了flex-direction: row-reverse;才出现了现在看到的情况。

现在只有四个宽度为 100px的矩形,在一行内还能放的下,宽度或者数目发生了巨大变化的时候,要怎么办才好呢?为了解决这个问题,可以在盒容器上使用flex-wrap属性,来让多余的内容怎么展现。它有三个值,默认情况下是nowrap,也就是一直往后堆砌;第二个值是"wrap",也就是放不下就换行接着放;第三个值是wrap-reverse,结果就是把 wrap 的结果反转一下就行,让换行后的内容在上边。

flex-directionflex-wrap一起有一个简写形式叫flex-flow,后面有两个值,第一个是flex-direction,第二个是flex-wrap 的值。

在布局中,对齐一直都是让人头疼的事,flex 很好的解决了这个问题。

justify-content属性解决了主轴方向对齐的问题,有 5 个参数值,分别是flex-start和主轴起点对齐,默认就是左对齐,flex-end和主轴结束点对齐,默认就是右对齐, center 相对主轴居中对齐, space-between两端对齐,中间分出均等的空间, space-around 均分空间,每个项目之间的空间相等。

align-items属性解决了交叉轴上对齐的问题,它也有五个属性,分别是flex-start起点对齐, flex-end终点对齐,center中点对齐,baseline第一行文字的底部对齐,stretch 没有设置高度或者项目高度为 auto,自动填满。

此外,还有一个属性,align-content,当 flex-wrap属性为 wrap 或者 wrap-reverse 时,并且子项目换行了的话,就需要align-content,它有flex-start起点对齐, flex-end终点对齐,center中点对齐, space-between 与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch没有设置高度或者项目高度为 auto,自动填满。

到了这里,容器上面的所有属性就学习完了。剩下的就是每个子项上的属性。

首先出场的是order,字如其名,决定每个子项目的顺序,默认为 0,数字越小越靠前。比如下面代码,把绿色放到最前面只需要把它的 order 属性设置为-1 即可。

css 复制代码
<div style="display: flex;">
    <div style="background: black;height: 50px;width: 100px;"></div>
    <div style="background: green;height: 50px;width: 100px;order: -1;"></div>
    <div style="background: red; height: 50px;width: 100px;"></div>
    <div style="background: blue; height: 50px;width: 100px;"></div>
</div>

第二个属性,flex-grow字如其名,决定在有空余空间的时候,是否放大,默认情况下不变,默认值为 0,如果为非 0 的,则按数字对应的比例均分剩余空间。如下代码,将还得区域设置为 1,则其独占剩余空间

css 复制代码
<div style="display: flex;">
    <div style="background: black;height: 50px;width: 100px;flex-grow: 1;"></div>
    <div style="background: green;height: 50px;width: 100px;order: -1;"></div>
    <div style="background: red; height: 50px;width: 100px;"></div>
    <div style="background: blue; height: 50px;width: 100px;"></div>
</div>

flex-shrink相对的则是,当空间区域不足时,是否缩小。默认值为 1,缩小,0 不缩小。不能是负数,其它的则根据数字等比例缩小。

flex-basic用来定义不缩放的时候,子项目的大小。flex属性是以上三个属性flex-growflex-shrinkflex-basic的缩写形式,默认值为 0 1 auto。

除了可以控制自己的大小缩放外,flex item 还可以控制自己的对齐方式,这个值就是 align-self。它有auto | flex-start | flex-end | center | baseline | stretch; 6个值。

到这里 flex 布局就学习完了。总结一下就是 flex container 配置对齐,换行,位置,flex item 自己决定大小和位置。

grid 网格布局

和 flex 弹性盒子布局一样, grid 网格布局也是现代代码里常见的布局之一,尤其是那些只为 chrome 写代码的人里面。

和 flex 不一样的是,flex 只能是操作一行或者一列,也就是通过flex-direction确定主轴的方向,然后去操作行或者列,而 grid 则可以同时操作行和列。

grid 布局的用法

  • 和 flex 一样,首先需要一个容易盒子,然后把需要布局的项目放在里面,称为子项目。这里把 container 的display属性设置为'grid'。为其它子项目设置背景颜色,就出现了下面的情况。看起来和正常流布局没啥区别,先不管。

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: grid;
  }
  .item: {
    
  }
  .item{
    border:solid 1px black;
  }
</style>
  • 为了改变所有项目挤在一起丑陋的样子,需要使用grid-template-rowsgrid-template-columns来设置每一行每一列有多高,有多少个子项目。具体用法如下
css 复制代码
.container{
    grid-template-row: lineHeight1 lineHeight2 lineHeight3;
    grid-template-column: rowWidth1 rowWidth2 rowWidth3; 
}

有多少行就定义多少个行高即可,有多少个列定义多少个列高即可。这里一共有9 个子项目,所以设置成 3*3 的即可。

可以分别先只设置grid-template-rowsgrid-template-columns看看效果,如果只设置一个,另外一个则被默认为只有 1,对应的宽度或者高度则为元素本身的宽高。
1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

repeat()函数

这样,一个 grid 的布局就出来了,记住这两个属性,一些简单的 grid 布局就能完成。但是它的强大不止于此。如果有很多的行或者列,一个个写下去就很麻烦,这个时候就要用到repeat()函数。它接收两个值,第一个是要重复的次数,第二个是要重复的模式。

比如前面我们的行和列是这样写的

css 复制代码
.container{
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
}

使用repeat()则可以这样写,效果是一样的。

css 复制代码
.container{
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
}

如果我们模式重复,但是行高或者列高有区别,比如 每三行重复一次,像这样的重复重复 5。则可以这样写

css 复制代码
.container{
    grid-template-rows: repeat(5, 100px 120px 200px);
    grid-template-columns: repeat(5, 100px 120px 200px);
}

auto-fill 关键字

那如果是行和列不确定怎么办呢?传auto-fill关键字给repeat即可。这样,就会根据行高和行宽自动填满容器。

arduino 复制代码
.container{
    grid-template-rows: repeat(auto-fill, 100px 120px 200px);
    grid-template-columns: repeat(auto-fill, 100px 120px 200px);
}

fr 关键字

在定义行高行宽时,合法的单位都可以使用,比如 px,百分比等。但是远不止于此,它还提供了一个类似百分比,但是强于百分比的关键单位 fr。它用来按比例划分空间,1fr 代表一个单位,如下代码代表占据全部空间。需要注意的是grid-template-rows如果容器没有定义高度,则会失效。

css 复制代码
.container{
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

如下代码则代表第一列宽度是 3 分之一,第二列宽度是 3 分之二

css 复制代码
.container{
    grid-template-columns: 1fr 2fr;
}

和其它单位一样,fr 在这里可以混合着用。

minmax()

除了按比例划分,还可以给定一个变化的区间范围。这就是minmax()函数,它接收两个参数,分别为最小和最大值,表示空间不足时至少也要这个长度,即使空间很大也不能超过这个长度。

auto 关键字

在定义长度的过程中,有些区域的大小我们并不在乎,只是想填点东西进去显得不那么突兀,就可以使用auto关键词,可以让空间自由伸缩。

行和列之间的留白 grid-row-gap grid-column-gap

有时候子项目之间需要一个留白,这个时候我们就可以使用 grid-row-gapgrid-column-gap来定义。也可以用他两的简写形式grid-gap来定义,它接受两个值,第一个是行之间的留白,第二个是列之间的留白。

开个脑洞,如果不用grid-gap,用其它属性,这个留白怎么实现,有那些坑?
1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

grid-auto-flow

是否记得 flex 布局里面有个flex-direction属性来决定是主轴的方向,也就是怎么排列。在 grid 布局里面也有个类似的属性值叫 grid-auto-flow来决定子项目的排列方向,它决定了优先排列的顺序是按行还是按列。所以它接收 rowcolumn两个值,默认是row,其实还有两个变体row densecolumn dense,变体后面再继续学习。

  • grid-auto-flow的属性是为 row

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: row;
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • grid-auto-flow的属性是为 column

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

对比发现,grid-auto-flow 的属性为 row 时,从左往右依次排列数字,也就是行优先。为 column 时,从上到下一次排列,也就是列优先。

子项目对齐方式 justify-items,align-items,place-items

justify-items用来设置水平对齐方式,align-items用来设置垂直对齐方式。place-items是它们两的简写。

它们的属性值完全相同,所以一起记就可以。除了stretch,其它对齐方式都是不管子项的宽度的,因此要小心。

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。

项目的对齐方式 justify-content align-content place-content

这三个属性用来定义整个内容区域的对齐方式 justify-content表示水平,align-content 表示垂直,place-content是二者的简写。由于两者的属性值一模一样,为了节省时间以justify-content为例学习一下

  • justify-content 为start

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: start;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • justify-content 为end

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: end;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • justify-content 为center

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: center;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • justify-content 为stretch

stretch 属性值在没指定列宽时会自动填满,但是指定了就和 start 没有区别。这里我特意注释掉了列宽。
1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    <!-- grid-template-columns: 100px 100px 100px; -->
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: stretch;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • justify-content 为space-around

每一个项目两侧间隔相等且不合并。所以可以看到两个项目之间要宽一点。这里开一下脑洞,margin 合并的知识点还记得不?
1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: space-around;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • justify-content 为space-between 项目间间隔相等,与边缘没有间隔

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: space-around;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>
  • justify-content 为space-evenly 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。对比 space-around 学习

1
2
3
4
5
6
7
8
9

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: column;
    column;justify-content: space-evenly;border:solid red 1px
  }
  .item: {
    border:solid 1px black; 
  }
</style>

容器之内布局之外的行高列高 grid-auto-rows, grid-auto-columns

有时候我们虽然在精心布局,但是难免出现一些特殊的情况在布局之外,但是容器之内出现子项,这个时候就有一个难题。比如咱们 demo 里的这个9 个格子本来没事,但是要有一个 10 怎么办?
1
2
3
4
5
6
7
8
9
10

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

看上面例子,就是凉拌。这肯定不行,所以需要给他们一个默认值,所以就有grid-auto-rowsgrid-auto-columns的用途了。给它们设置一个默认值看看。
1
2
3
4
5
6
7
8
9
10

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-rows: 100px;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

grid-template-areas 为每一个区域命名

为每一个区域娶一个名字,这个知识点现在知道就行。后面用。 如

css 复制代码
.container{
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
}

关于 grid 布局 container 的知识点到这里就学习完了。没想到这么多,总结一下,首先声明 display 属性为 flex。然后设置 grid-template-rows 和 grid-template-columns决定布局。为了防止出现布局外的因素,可以使用 grid-auto-rows,grid-auto-columns来设置超出子项的默认布局。通过 grid-auto-flow 来决定渲染的顺序是按行还是按列。justify-items和 align-items 分别用来定义水平和垂直对齐方式,justify-conent和 align-content 用来决定内容区域的对齐方式。

子项目 决定自己的大小和位置

可以通过指定位置的方式,子项目决定自己占据的布局空间。

  • grid-column-start属性:左边框所在的垂直网格线
  • grid-column-end属性:右边框所在的垂直网格线
  • grid-row-start属性:上边框所在的水平网格线
  • grid-row-end属性:下边框所在的水平网格线
  • grid-area 放置项目到grid-template-areas 命名的空间

1
2
3
4
5
6
7
8
9
10

xml 复制代码
<div class="container">
    <div class="item item1" >1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
</div>
<style>
  .container{
    display: flex;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-rows: 100px;
    grid-column-start:2; 
    grid-column-end: 4;
    grid-row-start:2;
    grid-row-end: 3;
  }
  .item: {
    border:solid 1px black; 
  }
</style>

子项内的对齐方式

justify-self决定水平对齐,align-self 决定垂直对齐,place-self 是简写。它们的属性值一样。 如下

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。

这一部分完全花费的时间完全超出了我的预料,能看到的有缘人自己写demo实践吧。

浮动布局

flex 布局和 grid 布局是现代 web 开发常用的布局方式,然而在它们出现之前,浮动布局则被经常用到。

float 属性

元素设置了 float 属性后就会向某一个方向浮动过去,内联样式和文字会围绕着它,也就是说碰到文字和内联样式,它会根据自己的大小占据文档流,而遇到块级样式,则会重合。脱离文档。块级样式盒子会和它重合,但是文字依然会围绕着它。如下
浮动
这个是块级盒子

css 复制代码
<div style="height: 100px;background: #e74478;">
    <div style="height: 50px;background: green;width: 50px;float: left;opacity: 0.6;">浮动</div>
     <div style="background: yellow;height: 50px;">这个是块级盒子<div>
</div>
  • left 向左浮动
  • right 向右浮动
  • inline-start 向容器开始的一侧浮动向开始的一侧浮动,这个具体在左边还是右边受direction:属性值的影响,ltr 在左,rtl 在右。
  • inline-end 向容器浮动结束的一侧浮动,具体在左边还是右边受direction:属性值的影响。

clear

学习了 float,clear 属性就不得不学习,不然会不完整。如果一个元素旁边有浮动元素,内联的会紧挨着它,块级这会和它贴在一起,为了打破这种局面,就需要 clear 属性值。

  • left 清除元素左边的浮动,把当前元素移到下一行
  • right 清除元素右边的浮动,把元素移到下一行
  • both 清除元素两边的浮动
  • inline-start 清除启始位置的浮动。具体看 direction 属性的值
  • inline-end 清楚结束位置的浮动。具体看 direction 属性的值

这里有个容易混淆的概念,就是 clear 属性是用在换行的元素上,而不是当前浮动的元素上,当然这里这个需要换行的元素也可以是另外一个浮动元素。

比如下面的绿色盒子和蓝色盒子,如果想让蓝色盒子换到下一行,则给它添加clear:left;,想让绿色盒子换到下一行,则得想想其他办法,因为它蓝色在它后面。

css 复制代码
<div style="background: #e74478;height: 200px;">
    <div style="float: left;width: 50px;height: 50px;background:green;"></div>
    <divstyle="float: left;width: 50px;height: 50px;background: blue;"></div>
</div>

多列布局

多列布局之前一直被我忽略,今天复习才发现,原来还可以这么写。它很简单,就四个属性。

  • column-count 一共有多少多少列。 auto 根据宽度和容器大小自定义 大于 0 的具体数字,代表有多少列。
  • column-width 每一列容器的最小宽度, 两个参数值,auto,根据容器大小和列个数自定义 。最小宽度,合法的 css 值即可,小于这个值就不缩小了,其它时候会自适应。
  • column-gap 列之间的宽度
  • column-rule 列直接的分割线,写法类似 border
xml 复制代码
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
</div>

<style>
    .container{
        column-width: 100px;
        column-count: 2;
    }
    .item1{
        background: aliceblue;
    }
    .item2{
        background: aqua;
    }
    .item3{
        background: #d8d873;
    }
    .item4{
        background: blue;
    }
    
</style>
相关推荐
逐·風7 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫36 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
鱼跃鹰飞4 小时前
大厂面试真题-简单说说线程池接到新任务之后的操作流程
java·jvm·面试
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js