CSS之 align-items的选项试验220729

最新推荐文章于 2025-06-09 18:19:53 发布

原创最新推荐文章于 2025-06-09 18:19:53 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

HTML CSS JS 专栏收录该内容

105 篇文章

订阅专栏

本文详细介绍了CSS align-items属性的多种可用选项，包括stretch、normal、center等，并通过代码示例展示了如何在flex和grid布局中应用这些选项，实时观察其效果。

CSS之 align-items的选项试验220729

align-items的选项:
[‘stretch’,‘normal’,‘center’,‘safe center’,‘unsafe center’,‘start’,‘end’,‘flex-start’,‘flex-end’,‘self-start’,‘self-end’,‘baseline’,‘first baseline’,‘last baseline’];

测试代码:

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title></title><style>

body{margin:0}

#BodyH{display:flex; align-items:center; justify-content:flex-start; background-image:linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);}



</style><script>
if(!document.title.length)(function(){var str=document.URL; str=str.substring( str.lastIndexOf("/")+1 , str.lastIndexOf('.')); str=decodeURI(str); document.title=str;})();

let isLog=true;clog=function(){if(isLog)for(let a of arguments)console.log(a);}; n09="0123456789"; lAZ="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; laz="abcdefghijklmnopqrstuvwxyz"; Z62=n09+lAZ+laz; Z62o={};for(let i=0;i<Z62.length;i++)Z62o[Z62[i]]=i; const CTTT="Content-type";
rdmN=(u)=>parseInt(Math.random()*u); rdmV=(sa)=>sa[rdmN(sa.length)]; rdmS=(l=1,sample=Z62)=>{let s='';for(let i=0;i<l;i++)s+=rdmV(sample);return s;};
z62=z62l=(l)=>rdmS(l);		decFrZ62=(z)=>{let a=Array.from(z).reverse(); let i=0; for(let j=0;j<a.length;j++)i+=Z62o[a[j]]*Math.pow(62,j);return i;};
z62Now=()=>{let l=Date.now(),a=[]; while(l>62){a.push(Z62[l%62]);l=parseInt(l/62);};a.push(Z62[l]);return a.reverse().join('');};
z62Id=(l)=>{let s=z62Now(); if(l&&l>6){l-=6;s+=z62(l);}return s;};
rdmRgb=()=>'rgb('+rdmN(256)+','+rdmN(256)+','+rdmN(256)+')'; rdmBgc=()=>"background-color:"+rdmRgb()+";";

isA=(x)=>x&&x.constructor===Array,isS=(x)=>x&&x.constructor===String,isF=(x)=>x&&x.constructor===Function,isO=(x)=>x&&x.constructor===Object,isJ=(x)=>isA(x)||isO(x),isM=(x)=>x&&x.constructor===Map;
isE=(x,tn)=>{let b=(x&&x instanceof HTMLElement); if(b&&tn)b=(x.tagName===tn.toUpperCase()); return b;}; 
isColl=(x)=>x&&isFinite(x.length)&&x.constructor!==String;
isEnterEvent=(ev)=>ev&&(ev.which===13&&ev.keyCode===13&&ev.key==="Enter"&&ev.code==="Enter");
triggee=triggerElementEvent=触发元素的事件=(e,evn)=>{e=dgebi(e);e.dispatchEvent(new Event(evn)); return e;};
z24ParseInt=(s)=>{let ar=Array.from(s); let ar1=ar.filter((v)=>isFinite(v)); return parseInt(ar1.join(''));};
stringSeparator=(str,ss,hf)=>{if(!ss||ss.length===0)return str; let ar=str.split(ss.shift()); if(isF(hf))hf(ar); ar=ar.map((s)=>stringSeparator(s,ss.slice())); return ar;};
//ge //dgebi
const ge=window.dgebi=function(i,s){if(!i)return;let e=i;if(isS(i)){e=document.getElementById(i);if(!e)e=document.querySelector(i);} if(!s)return e; s=ge(s); if(isE(e)&&isE(s))e.appendChild(e.新娃=e.xw=s);else{clog("↓↓↓",e,"父或子不是Element",s,"↑↑↑");}return e;};
dce=window.dcept=(p,tn="DIV")=>{let e=document.createElement(tn);e.idefine=(i)=>{e.id=i;return window[i]=e;};e.htm=(h)=>{if(h!==undefined)e.innerHTML=h;return e;};
		e.ass=e.aCssText=(s)=>{if(s)e.style.cssText+=";"+s;return e;};e.cls=(c)=>{if(c!==undefined)e.className+=" "+c;return e;};
		e.ce=(a0,c2,h2)=>{let ar; if(isS(a0))ar=a0.split("=->");else ar=a0; let t=ar[0].replace(/\s/g,''),h=ar[1],ct=ar[2],c=ar[3]; e.ceLast=dcept(e,t).htm(h).htm(h2).aCssText(ct).cls(c).cls(c2); if(isS(ar[4]))eval("const P=e,I=e.ceLast;"+ar[4]); return e.ceLast};
		e.ca=(a0,c,h)=>{e.ce(a0,c,h);return e};
		e.cen=function(a0, n=1, c, f)	{e.cenAr=[];let ar;if(isS(a0))ar=a0.split('\n');else ar=a0; for(let t=0;t<n;t++)for(let tn of ar){let s=e.ce(tn).cls(c); if(f)f(s,e, e.cenAr); e.cenAr.push(s)};return e;};
		e.cbn=function(a0,n0=1,n1=1,c0,c1,f0,f1)	{let ar;if(isS(a0))ar=a0.split('\n');else ar=a0; let pt=ar.shift(); e.cen(pt,n0,c0,f0); for(let b of e.cenAr){b.cen(ar,n1,c1,f1);} return e;};
		e.rdmBgc=function(){e.style.backgroundColor=rdmRgb();return e;};
		dgebi(p,e);return e;};
window.dceptq=function(p,t,q=1){let ear=Array(q); for(let n=0;n<q;q++){ear.push(dcept(p,t));} return ear;};
dceptc=(p,t,c)=>dcept(p,t).cls(c); dcDiv=(p,c)=>dceptc(p,"div",c); dcArticle=(p,c)=>dceptc(p,"article",c); dcSection=(p,c)=>dceptc(p,"section",c);
dcFL=(p,lh,c)=>{let f=dcept(p,"fieldset").cls(c); f.l=dcept(f,"legend").htm(lh); return f;};
evalab=(p,code)=>dcept(p,"label").cls("evalab").cen("span=->"+code+"=->=->evalabL , span=->的结果是=->=->evalabC , span=->"+eval(code)+"=->=->evalabR");
window.dwbr=function(a0=1){let ar=arguments,br=dwbr.br; if(Number.isFinite(a0)){br(a0);return;} for(let a of ar)document.write(a.replace(/\n/g,"<br/>"));br();}; dwbr.br=function(n=1){for(let c=0;c<n;c++)document.write("<br/>");};
window.simpleTableByA2=(p,a2)=>{let tb=dcept(p,"table").cen(['thead','tbody','tfoot']);tb.h=tb.tHead;let tbd=tb.b=tb.tBody=tb.tBodies[0]; tb.f=tb.tFoot; tb.Ntr=dcept(tb.h,"tr","Ntr"); let ar=a2.shift(); ar.forEach((v)=>dce(tb.Ntr,"th").htm(v)); 
		a2.forEach((row,r)=>{let tr=dcept(tbd,"tr");row.forEach((v,c)=>{let td=dce(tr,"td").htm(v).cls("R"+r+"C"+c);});});};
</script><script>





</script></head><body><header id="BodyH">

	<label></label><script>{let s=document.currentScript; let l=s.previousElementSibling; if(!l.innerHTML.length)l.textContent=document.title}</script>

</header><div id="BodyB">





</div><script>const BodyH=dgebi("BodyH") , BodyB=dgebi("BodyB") ; dce(document.body).idefine("BodyF"); dce(BodyB).idefine("BBB");</script>
<script>{


	const ops1 = ['stretch','normal','center','safe center','unsafe center','start','end','flex-start','flex-end','self-start','self-end','baseline','first baseline','last baseline'];
	const ops2 = ['inherit' , 'initial' , 'unset' , 'revert' , ''];
	const ops = [...ops1,...ops2];

	const alignItemsBoxAr=[];
	function buildSettingButtons(containerElement, cssProperty, ops){
		let fdst = dcept(containerElement,"fieldset");
		let leg = dcept(fdst, "legend").htm("设置"+cssProperty);
		for(let v of ops){
			let btn = dcept(fdst, "button").htm(v||"清空").cls("CssSettingButton");
			btn.addEventListener("click",function(ev){
				for(let tarE of alignItemsBoxAr){ 
					tarE.style.setProperty(cssProperty,v);
				}
			});
		}
	}

	function buildUnit(p , itemCount){
		let unit  = dcSection(p,"Unit");
		let h = dcept(unit, "header");
		unit.cbn(["section","span"],1,itemCount,"Box","Item Cell",null,function(e,p,ear){e.rdmBgc();});
		alignItemsBoxAr.push(unit.ceLast);
	}


	let btnBar = dcept(BBB,"nav").cls("BtnBar");
	
	let flexArea = dcept(BBB,"section").cls("FlexArea");
	let flexBoxHolder = dcFL(flexArea,"flex").ce("div","FlexBoxHolder");

	let gridArea = dcept(BBB,"section").cls("GridArea");
	let gridBoxHolder = dcFL(gridArea,"grid").ce("article","GridBoxHolder");

for(let n=1;n<=10;n++){ buildUnit(flexBoxHolder, n); buildUnit(gridBoxHolder, n); }


	buildSettingButtons(btnBar, "align-items", ops);

	let itv = setInterval(function(){
		for(let box of alignItemsBoxAr){
			box.previousElementSibling.innerHTML='↓ align-items: '+getComputedStyle(box).getPropertyValue("align-items");
		}
	} , 100);
	


}</script><style>
	*{box-sizing:border-box;}

	.BtnBar button{padding:5px 30px; margin:5px; font-size:16px; color:white; background-color:#0099ff; border:none; border-radius:10px; }
	.BtnBar button:hover{ cursor:pointer; transform:scale(1.1); }
	.FlexBoxHolder , .GridBoxHolder {display:grid;  grid-template-columns:1fr 1fr 1fr 1fr 1fr;  }
	.FlexBoxHolder .Box{display:flex;  height:100px;  border:1px solid black;}
	.GridBoxHolder .Box{display:grid; height:200px; border:1px solid blue; grid-template-columns:1fr 1fr 1fr; }

	.Item{display:block; width:30px; height:30px; }

</style><script>{
	






}</script><script>{


	






}</script></body></html>