css justify-content Test210428

最新推荐文章于 2024-02-17 03:44:31 发布
最新推荐文章于 2024-02-17 03:44:31 发布
阅读量81 收藏
点赞数
分类专栏： HTML CSS JS 学习笔记 解决问题 试验演示 过程记录 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kfepiza/article/details/126239701
版权

css justify-content Test210428

用于测试flex弹性盒子下, 单个元素,多个元素,子元素还有子元素 在各种justify-content的选项下的效果,并且可以改变align-items

测试代码


<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>css justify-content Test210428</title>
<style id="FirstStyleTag" >
*{box-sizing:border-box;}
fieldset{background:#fffddd}
#BodyBody>fieldset>legend{font-size:36px; }
.FlexBox{display:flex;  height:160px; border:1px solid black; }
.FlexBox>*{display:flex; padding:10px; align-items:center; color:white;}
.FlexBox>:nth-child(1){background-color:red;}
.FlexBox>:nth-child(2){background-color:orange}
.FlexBox>:nth-child(3){background-color:yellow}
.FlexBox>:nth-child(4){background-color:green}
.FlexBox>:nth-child(5){background-color:cyan}
.FlexBox>:nth-child(6){background-color:blue}
.FlexBox>:nth-child(7){background-color:purple}
.FlexBox>:nth-child(8){background-color:#0099ff}
.FlexBox>:nth-child(9){background-color:#9900ff}

</style><script>function dgebi(x){if(x && x.constructor===String)x=document.getElementById(x); return x;} ; function dcept(p,tn){var e=document.createElement(tn); p=dgebi(p).appendChild(e); return e;} ; const FirstStyleTag=dgebi("FirstStyleTag");

var justifyContentOptions = [];
justifyContentOptions.push("start");
justifyContentOptions.push("flex-start");
justifyContentOptions.push("end");
justifyContentOptions.push("flex-end");
justifyContentOptions.push("center");
justifyContentOptions.push("left");
justifyContentOptions.push("right");
justifyContentOptions.push("baseline");
justifyContentOptions.push("first-baseline");
justifyContentOptions.push("last-baseline");
justifyContentOptions.push("space-between");
justifyContentOptions.push("space-around");
justifyContentOptions.push("space-evenly");
justifyContentOptions.push("stretch");
justifyContentOptions.push("safe center");
justifyContentOptions.push("safe left");
justifyContentOptions.push("safe right");
justifyContentOptions.push("safe flex-end");
justifyContentOptions.push("unsafe center");
justifyContentOptions.push("unsafe left");
justifyContentOptions.push("unsafe right");
justifyContentOptions.push("unsafe flex-end");

console.info("FirstStyleTag.__proto__",FirstStyleTag.__proto__); console.log("FirstStyleTag.sheet",FirstStyleTag.sheet);

</script></head><body><header id="BodyHeader">
	<p style="font-size:20px;" >justify-content : start | flex-start | end | flex-end | center | left | right | baseline | first-baseline | last-baseline | space-between | space-around | space-evenly | stretch | safe | unsafe</p>
	<nav style="word-spacing:16px; "><label>导航: </label><a href="#多元素容器010 ">多元素演示</a>	<a href="#单元素容器010 ">单元素演示</a>	<a href="#混合元素容器010 ">混合元素容器</a>	<a href="# "></a></nav>
	<nav id="SetAlignItemsBar"><label>切换align-items:为 </label></nav>
	<script>
var SetAlignItemsBar = dgebi("SetAlignItemsBar");
for(opt of justifyContentOptions){
	let btn = dcept(SetAlignItemsBar , "button"); btn.type="button"; btn.innerText=opt; btn.onclick=function(ev){LastStyleTag.innerText=`.FlexBox{align-items:${ev.target.innerText};}`;}
}
	</script>
</header><div id="BodyBody" style="position:fixed; top:200px; width:100%; height:80vh; overflow-y:auto; ">

<fieldset><legend>多元素演示</legend>
	<div id="多元素容器010" ></div>
</fieldset>
<fieldset><legend>单元素演示</legend>
	<div id="单元素容器010" ></div>
</fieldset>
<fieldset><legend>混合元素演示</legend>
	<div id="混合元素容器010" ></div>
</fieldset>





</div><footer id="BodyFooter"></footer><script>const BodyHeader=dgebi("BodyHeader") , BodyBody=dgebi("BodyBody"), BodyFooter=dgebi("BodyFooter");
var 多元素容器010 = dgebi("多元素容器010");
var 单元素容器010 = dgebi("单元素容器010");
var 混合元素容器010 = dgebi("混合元素容器010");

function add多元素演示(opt){
	var f=dcept(多元素容器010,"fieldset"); var l=dcept(f,"legend"); l.innerHTML=opt;
	var flexBox=dcept(f,"div"); flexBox.className="FlexBox"; flexBox.style.justifyContent=opt;
	for(let i=0; i<9; i++){let son=dcept(flexBox,"label"); son.innerHTML="label_"+i; };
}
for(opt of justifyContentOptions){add多元素演示(opt);}


function add单元素演示(opt){
	var f=dcept(单元素容器010,"fieldset"); var l=dcept(f,"legend"); l.innerHTML=opt;
	var flexBox=dcept(f,"div"); flexBox.className="FlexBox"; flexBox.style.justifyContent=opt;
	let son=dcept(flexBox,"span"); son.innerHTML="span"; 
}
for(opt of justifyContentOptions){add单元素演示(opt);}


function add混合元素演示(opt){
	var f=dcept(混合元素容器010,"fieldset"); var l=dcept(f,"legend"); l.innerHTML=opt;
	var flexBox=dcept(f,"div"); flexBox.className="FlexBox"; flexBox.style.justifyContent=opt;
	flexBox.innerHTML = `hello<span>span1</span>world<div>div1<br>第二行<br><span>第三行</span></div>世界<label>latel1</label>你好`
}
for(opt of justifyContentOptions){add混合元素演示(opt);}










</script><style id="LastStyleTag"></style><script>var LastStyleTag=document.getElementById("LastStyleTag");</script></body></html>

在这里插入图片描述

kfepiza
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Typing_Speed_Test:在HTML，CSS和JavaScript中完成打字速度测试
05-10
justify-content: space-between; } ``` 【JavaScript】 JavaScript负责处理交互逻辑，如检测用户的输入、计算速度和准确性，并更新计分板。主要涉及以下几个步骤： 1. 获取原始文本和用户输入：使用`document....
Coursera-test
03-07
在"Coursera-test-main"这个文件夹中，可能包含了HTML文件和CSS文件，以及可能的图片或其他资源文件。HTML文件用于构建网页结构，而CSS文件则负责应用样式。学习者可能通过修改CSS代码，实现了各种布局效果和视觉...
当flex的justify-content遇上overflow
HYeeee的博客
12-15 2013
当一个容器中设置了flex的justify-content:center ，并且设置overflow时，看下面这个代码： <style> .test{ height:100px; border:1px solid #559; overflow:auto; /** 下面是垂直水平居中 */ display: flex; flex-direction: column; align-
css_ justify-content和text-align的区别
YuuuPeeiiiii的博客
12-31 427
是用于 flex container 上的属性，用于水平居中 flex items，即将 flex items 沿着 flex container 的主轴居中对齐。简单来说，都是让元素里的元素/文本居中对齐。一个是作用在flex容器上（display:flex），一个是作用在block上。是用于 block-level 元素上的属性，用于水平居中元素内的文本内容，即将文本内容沿着元素的水平中心线居中对齐。
justify-content:center不兼容ie8
jun的博客
03-16 1327
原有代码是父级dispaly: flex;子级justify-content:center；但是ie8不生效 解决方案为：父级test-align: center;子级display: inline-block; 局限：只能解决justify-content:center；不能解决justify-content: space-between;等其他样式。 ...
justify-content,align-items，align-self,text-align
以爱护甲,爱满枫林。
03-13 500
justify-content（在父元素设置） 设置弹性盒子元素在主轴（横轴）的对齐方式。 align-items, align-self 设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。 其中align-items属性用于弹性容器， 而align-self用于弹性项目。 text-align 属性规定元素中的文本的水平对齐方式。 ...
flex布局：justify-content、aign-content、align-items
cotexarm7的专栏
08-20 5527
1.justify-content：弹性盒子在主轴方向上的排列方式，例子 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;style type
flex justify-content margin text-align 居中测试
liu709127859的专栏
05-04 877
&lt;!DOCTYPE HTML&gt;&lt;html&gt;    &lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;    &lt;style&g
CSS perspective、perspective-origin 效果
卡尔特斯
12-22 2271
指的是： 平面距离用户之间的距离，浏览器通过该距离来计算用户的视角大小，从而制造出近大远小的 效果。当元素的 大于 或者元素在 轴正向移动后，元素的大小都会超过实际大小；同理，当元素的 小于 或者在 轴反向移动后，元素大小都会小于实际大小。随着 的值增大，页面元素变得更小：这个其实不难理解，相当于用户眼睛离屏幕更远了，元素当然也就显得更小了。 定义了观察者的视角相对于显示元素的位置。通常用该属性来定义视线灭点，也即视线消失的位置。上面的例子中，并未指定该属性，因为默认使用 ，所以每一个元素看
CSS-Modules
weixin_45678402的博客
08-05 332
本文参考文章 Class Modules CSS-Modules功能很单纯，只加入了局部作用域和模块依赖； 作用：可以保证某个组件的样式，不会影响到其他组件； 一、局部作用域 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。 产生局部作用域的唯一方法： 使用一个独一无二的class名字，不会与其他选择器重名； 下面是一个React组件App.js； import React from 'react'; import style from './App.css'; // 将样式文件App.c
CSS box-flex属性，然后弹性盒子模型简介
kaikai4的专栏
05-17 508
一、淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways，在My CSS Wish List一文中，见到了个新鲜的CSS属性，就是题目中的box-flex，以前没有见过，顿生疑惑，不知是骡子还是马，于是习惯性谷歌之，真是不谷不知道，一谷吓一跳。倒不是该属性本身，而是此属性作为导火索，让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样
test-repo
03-28
在IT行业中，"test-repo" 这个标题可能代表一个测试仓库，通常...以上就是围绕"test-repo"和"CSS"标签可能涉及的一些核心知识点。在实际开发中，了解并熟练掌握这些概念对于创建高效、美观且响应式的Web界面至关重要。
test-layout
03-09
综上所述，"test-layout"可能涵盖了HTML布局的各种技术，包括基本元素理解、CSS布局模型的应用、响应式设计以及代码组织策略。通过实践这个项目，开发者可以提升自己在创建高效、适应性强的网页布局方面的能力。
test-flex:测试弹性功能
07-05
在提供的压缩包文件“test-flex-master”中，我们可以预期找到一个测试项目，其中包含HTML、CSS和JavaScript文件，用于演示和验证Flexbox的各种功能。开发者可能通过JavaScript来控制Flexbox属性，以展示其在不同...
Echarts的x轴调整间隔,可以用 xAxis数组子项的axisLabel.interval
kfepiza的博客
06-06 9221
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。(index:number, value: string) => boolean 第一个参数是类目的。可以用数值表示间隔的数据，也可以通过回调函数控制。可设置为 : number 或 Function 数字或函数。index，第二个值是类目名称，如果跳过则返回 false。坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。默认值是’auto’默认值是 ‘auto’
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
最新发布
kfepiza的博客
02-17 4113
background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);
iframe跨域通信传递数据笔记 postMessage
kfepiza的博客
12-12 3976
文章目录前言一、iframe的window二、上级向iframe传值1.用 postMessage2.XX三、postMessage("发送的消息","域名*代表全部 ");1.postMessage是window下的方法2.语法从被传值目标的window对象调用postMessage(参数1,参数2,参3一般省略)参数1:messageData参数2:targetOrigin目标域名 , "*"代表所有参数3:是一个Transferable 对象 可无3. postMessage的特殊性, 可以跨越调用
CSS引入,引入外部CSS文件＜link rel=“stylesheet“ href=““ /＞或＜style＞@import＜/style＞ 测试2208092344
kfepiza的博客
08-09 3377
引入外部css文件的方式有link来的css的优先级@import来的css的优先级。
<!DOCTYPE html> <html> <head> <title>Live</title> <style> .container { position: relative; max-height: 100vh; /* 设置容器最大高度不超过浏览器高度 */ text-align: center; /* 水平居中对齐 */ display: flex; /* 使用flex布局 */ justify-content: center; /* 水平居中对齐 */ align-items: center; /* 垂直居中对齐 */ } .container img { width: 100%; /* 设置图片宽度为100% */ height: auto; /* 设置图片高度为自适应 */ max-height: calc(100vh - 80px); /* 设置图片最大高度不超过容器高度减去一定的边距（20px） */ } </style> </head> <body> <div class="container"> <img src="test_data/test.jpg" alt="your_image_description"> </div> </body> </html>如何让图片居中
05-19
可以使用以下CSS样式将图片水平和垂直居中： ``` .container { display: flex; justify-content: center; align-items: center; } .container img { max-width: 100%; max-height: 100%; } ``` 其中`....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kfepiza

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值