淮安做网站优化,企业营销网站怎样做,小型行业网站建设维护成本,一个网站的制作流程flexbox - 弹性盒子布局#xff08;弹性布局#xff09;
一维方向#xff0c;横纵向排列。 采用flex布局的元素#xff0c;称为 Flex 容器#xff08;flex container#xff09;#xff0c;简称容器 flex-direction
用于设置主轴方向#xff1b;子元素默…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 langen
headstyle.wrapper {/* 内部显示规则为flexbox布局外部显示规则时block (div classwrapper) */display: flex; /* 指定flex元素的间距 */gap: .5em; /* 设置水平为主轴左侧为起点换行 */flex-flow: row wrap;}.wrapper div {/* 边框 属性值边框线粗细像素 线条种类 线条颜色 */border:1px solid black;}/style
/head
bodydiv classwrapper div1/divdiv2/divdiv 3br3br3br3/divdiv444/divdiv styleflex-basis: 300px5/divdiv styleflex-basis: 200px6/divdiv styleflex-basis: 100px777777777777777/divdiv8888888888888/div/div
/body
/html flex-grow
如果有剩余空间这个元素可以分配到多少的比例
!DOCTYPE html
html langen
headstyle.wrapper {display: flex;gap: .5em; flex-flow: row wrap;border:1px solid red;}.wrapper div {border:1px solid black;}/style
/head
bodydiv classwrapper div1/divdiv2/divdiv 3br3br3br3/divdiv styleflex-grow: 35/divdiv styleflex-grow: 26/divdiv styleflex-grow: 17/divdiv8888888888888/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-startflex元素和容器主轴方向开始位置对齐左对齐flex-direction默认值为rowflex-endflex元素和容器主轴方向结束位置对齐右对齐centerflex元素和容器主轴方向中间位置对齐space-betweenflex元素 均匀分布在主轴上间距相同第一个 flex元素 和 container的主轴方向开始位置平齐最后一个 flex元素 和 container的主轴方向结束位置平齐space-aroundflex元素 均匀分布在主轴上间距相同第一个 flex元素 和 container的主轴方向开始位置的间距 以及 最后一个 flex元素 和 container的主轴方向结束位置的间距都是flex元素间距的一半space-evenlyflex元素 均匀分布在主轴上间距相同第一个 flex元素 和 container 的主轴方向开始位置的间距 以及 最后一个 flex元素 和 container的主轴方向结束位置的间距都于flex元素间距相同
从轴对齐——align-items
该属性缺省的条件下所有的 flex元素和最高的flex元素保持一致
flex-startflex元素和容器从轴方向的开始位置对齐上边对齐flex-endflex元素和容器从轴方向的结束位置对齐下边对齐centerflex元素和容器从轴方向的中间位置对齐
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 langenheadstylebody{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/headbody div导航栏/divdiv正文pre2222222 /pre/divdiv页脚/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 的高度由其内容决定但至少是 100pxminmax 第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 langenheadstyle.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/headbody div classwrapperdiv classbox1One/divdiv classbox2Two/divdiv classbox3Three/divdiv classbox4Four/divdiv classbox5Five/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;}本文参考自 22 flex布局容器六大属性_flex容器属性-CSDN博客 界面布局 - Flexbox | 白月黑羽 CSS布局----flex弹性布局(移动端完美解决方案_flex-basis: auto;-CSDN博客
