当前位置：首页 > news >正文

CSS —— 界面布局

news 2025/7/8 1:54:30

flexbox - 弹性盒子布局（弹性布局）

一维方向，横纵向排列。

采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"

flex-direction

用于设置主轴方向；子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式

row（默认）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

主轴 &交叉轴：交叉轴垂直于主轴

flex-wrap

用于设置自动换行；如果flexbox 容器（container）的宽度不足以存放所有 flex元素，就会出现滚动条，确保所有的 flex元素都在一行；若想实现超出container的宽度就自动换行，可设置flex-wrap: wrap

nowrap（默认）：不换行
wrap：换行，换到下面
wrap：换行，换到上面

flex-flow

flex-direction和flex-wrap的简写形式，默认为row nowrap

flex-basis

定义元素的基础宽度（是在默认主轴方向为row的时候；当修改flex-direction为column时，主轴方向就为列，那此时flex-basis这个属性控制的就是元素的高度；还需要注意的是，当你设置了width又设置了flex-basis那width的值就会被flex-basis覆盖掉。）

<!DOCTYPE html>
<html lang="en">
<head><style>.wrapper {/* 内部显示规则为flexbox布局；外部显示规则时block (div class="wrapper") */display: flex; /* 指定flex元素的间距 */gap: .5em; /* 设置水平为主轴，左侧为起点，换行 */flex-flow: row wrap;}.wrapper > div {/* 边框  属性值：边框线粗细像素 线条种类 线条颜色 */border:1px solid black;}</style>
</head>
<body><div class="wrapper">  <div>1</div><div>2</div><div> 3<br>3<br>3<br>3</div><div>444</div><div style="flex-basis: 300px">5</div><div style="flex-basis: 200px">6</div><div style="flex-basis: 100px">777777777777777</div><div>8888888888888</div></div>
</body>
</html>

flex-grow

如果有剩余空间，这个元素可以分配到多少的比例

<!DOCTYPE html>
<html lang="en">
<head><style>.wrapper {display: flex;gap: .5em; flex-flow: row wrap;border:1px solid red;}.wrapper > div {border:1px solid black;}</style>
</head>
<body><div class="wrapper">  <div>1</div><div>2</div><div> 3<br>3<br>3<br>3</div><div style="flex-grow: 3">5</div><div style="flex-grow: 2">6</div><div style="flex-grow: 1">7</div><div>8888888888888</div>  </div>
</body>
</html>

flex-shrink

注意：不要设置wrap自动换行，才能看出来

如果 flex容器空间比所有 flex元素空间总和小，这个元素空间缩减的比例

参考：

flex 的三个参数：flex-grow、flex-shrink、flex-basis_flex属性的三个值-CSDN博客

深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解-CSDN博客

主轴对齐——justify-content

flex-start：flex元素和容器主轴方向开始位置对齐（左对齐；flex-direction默认值为row）
flex-end：flex元素和容器主轴方向结束位置对齐（右对齐）
center：flex元素和容器主轴方向中间位置对齐
space-between：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container的主轴方向开始位置平齐，最后一个 flex元素和 container的主轴方向结束位置平齐
space-around：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container的主轴方向开始位置的间距以及最后一个 flex元素和 container的主轴方向结束位置的间距都是flex元素间距的一半
space-evenly：flex元素均匀分布在主轴上，间距相同；第一个 flex元素和 container 的主轴方向开始位置的间距以及最后一个 flex元素和 container的主轴方向结束位置的间距都于flex元素间距相同

从轴对齐——align-items

该属性缺省的条件下，所有的 flex元素和最高的flex元素保持一致

flex-start：flex元素和容器从轴方向的开始位置对齐（上边对齐）
flex-end：flex元素和容器从轴方向的结束位置对齐（下边对齐）
center：flex元素和容器从轴方向的中间位置对齐

grid - 网格布局

可以定义由行和列组成的二维布局。

列布局

grid-template-columns

指定列的数量和宽度；

指定网格的固定宽度

grid-template-columns: 100px 200px 300px; => 指定了网格有3列，从左到右，每列的宽度分别是 100px、 200px、 300px

指定每列的宽度占container宽的比例

grid-template-columns: 1fr 2fr 3fr; => 指定了网格有3列，从左到右，每列的宽度分别是container宽的 1/6、 1/3 (2/6)、 1/2 (3/6)

好处：网格的列宽可以随着 container 宽度的变化而动态的变化，始终占满 container宽度

grid-template-columns: 20% 30% 40%; => 表示这列占 container 的宽的百分比

固定宽度和比例混合使用

grid-template-columns: 200px 1fr 2fr; => 指定了网格有3列，从左到右，第1列的宽度固定为 200px，剩余2列的宽度分别是container除了第1列剩余宽度的 1/3、 2/3

连续相同宽度

repeat()标记

{

        /* 等价于 200px 200px 200px */

        grid-template-columns: repeat(3, 200px);

        /* 等价于 1fr 1fr 1fr 1fr */

        grid-template-columns: repeat(4, 1fr);

        /* 等价于 20px 1fr 1fr 1fr 1fr */

        grid-template-columns: 20px repeat(4, 1fr);

        /* 等价于 1fr 2fr 1fr 2fr 1fr 2fr */

        grid-template-columns: repeat(3, 1fr 2fr);

}

auto

列宽由内容决定

注意：

对于非固定宽度eg.1fr 1fr 1fr，如果cell里面的内容超过了当前cell的设定宽度，cell会自动变宽以适应内容的宽度。

而对于指定固定宽度eg.200px 200px 200px，如果cell里面的内容超过了当前cell的设定宽度，cell边界不会变化，cell里面的内容会跨越边界。

行布局

显式指定 —— grid-template-rows

指定行的数量和高度；但不能限定总行数

<!DOCTYPE html>
<html lang="en"><head><style>body{height: 100vh;/* 自己注释掉试一下；border边框区，margin外边距区域 ；去掉大盒子的外边距*/margin: 0; display: grid;/* 行间距为5px */gap: 5px;/* 指定了3行内容，其中导航栏和页脚高度由其内容决定，正文值为 1fr ，且没有其它fr（有2个fr就占1/2），表示该行的高度占满除了导航栏和页脚以外的全部高度 */grid-template-rows:  auto 1fr auto;}    div {border: 1px solid teal;}</style></head><body> <div>导航栏</div><div>正文<pre>2222222        </pre></div><div>页脚</div></body>
</html>

grid-template-columns没有指定，缺省值为none，只有一列

▲：grid-template-rows: 100px 100px; 只能指定前2行的高度是 100px，当元素超过2个时，后续元素产生在新行中，总数不受 grid-template-rows 指定行数限制。

gap属性：gap: 1.8em 1.3em; => 指明了行间距为1.8em ; 列间距为1.3em

gap: 1.8em 1.3em 是 row-gap 和 column-gap 的缩写
{row-gap: 1.8em;column-gap: 1.3em;
}
如果 row-gap 和 column-gap 一样，比如都是 1em，可以更简单的写为
{gap: 1em;
}

隐式指定（全局指定） —— grid-auto-rows

grid-auto-rows: 100px; => 不管产生的有多少行，都是 grid-auto-rows 指定的高度100px

几种特殊情况：

{       /* row 的高度由其内容决定 */

        grid-auto-rows: auto;

/* row 的高度是container的10% */

grid-auto-rows: 10%;

/*一组值的循环*/

        grid-auto-rows: 50px 100px 150px;

        grid-auto-rows: 0.5fr 3fr 1fr;

/*row 的高度由其内容决定，但至少是 100px；minmax 第1参数指定最小值，第2个参数指定最大值。规则是保证 min 一定满足的情况下，尽量取max值*/

        grid-auto-rows: minmax(100px, auto);

}

元素跨行跨列

网格线：grid布局，网格是由 网格线 划分而成的；从左到右，列网格线编号依次从1开始，从上到下，行网格线编号依次从1开始。

通常是一个子项占一个网格，当然也可以让一个子项占多个网格；怎么实现呢？

——通过grid-column-start , grid-column-end , grid-row-start , grid-row-end这四个属性；分别指定子项元素占据网格的起始线、终止线，从而指定占据多少个网格。

<!DOCTYPE html>
<html lang="en"><head><style>.wrapper {display: grid;gap: .8em .3em;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 100px;}/* 指定列网格线从1->4 ; 行网格线从1->3 ; 也就是说box1占据了3列2行的空间 */.box1 {grid-column-start: 1;grid-column-end: 4;grid-row-start: 1;grid-row-end: 3;}/* 指定列网格线从1->2 ; 行网格线从3->5 ; 也就是说box1占据了1列2行的空间 */.box2 {grid-column-start: 1;grid-row-start: 3;grid-row-end: 5;}.wrapper > div {border: 1px solid teal;}</style></head><body>  <div class="wrapper"><div class="box1">One</div><div class="box2">Two</div><div class="box3">Three</div><div class="box4">Four</div><div class="box5">Five</div></div></body>
</html>

▲：结束边界线如果不指定，缺省为起始位置+1 ；

剩余的没有指定的 grid 条目元素，在不重叠的前提下，尽量按照从上到下，从左到右的次序摆放

简写：

1.
  .box1 {grid-column: 1 / 4;grid-row: 1 / 3;}.box2 {grid-column: 1;grid-row: 3 / 5;}
2.使用 span 指定跨几个格子。
  .box1 {grid-column: 1 / span 3;grid-row: 1 / 3;}.box2 {grid-column: 1;grid-row: 3 / span 2;}
3.使用负数指定网格线，表示反方向计数的网格线
  .box1 {grid-column: 1 / -1;grid-row: 1 / 3;}