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>
2
2
2
2
2
2
2
</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; }
position定位属性
position
属性用于指定一个元素在文档中的定位方式
静态定位 static
就是不定位
相对定位 relative
相对于原来位置的定位
绝对定位 absolute
相对于非静态定位(static)的父元素进行定位移动
绝对定位查找父级的方式:就近找 定位 的父级,
如果逐层查找不到这样的父级,就以浏览器窗口为参照进行定位
🔺如果希望子元素相对于父元素进行定位,又不希望父元素脱标,就采用子绝父相的定位方式
脱标:脱离标准流:其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围
何为标准流 :就是标签按照规定好的默认方式排列;默认的从上至下,从左至右的排列顺序就是标准流
特点:
1.绝对定位元素 被从原来的 html布局中取出来 ,放置在一个独立的显示图层上;
2.绝对定位元素所在的图层 优先级高于 原来的图层,所以 遮挡了原来的内容;
3.原来的布局按照 去除这个绝对定位元素 正常布局。
固定定位 fixed
特点:和绝对定位一样;
不同的是固定定位都是相对于整个浏览器窗口的,和上级包含块元素无关。
float浮动属性
浮动属性值:left:向左浮动;right:向右浮动;none:不浮动;inherit:继承父元素的浮动属性
特点:浮动元素会脱离标准流(其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围),在标准流中不占位置
示例见:CSS:浮动(float)特性 之 脱标(脱离标准流)_css脱标-CSDN博客
清除浮动:
一般设 clear:both ;//同时清除左右两侧浮动的影响
也可以是:left //清除左侧浮动的影响 ;right同理
本文参考自: