flex布局演示（可线上运行项目）

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}div {width: 700px;height: 550px;padding: 10px;border: 1px solid gray;}h4 {margin: 10px 0 10px 10px;}button {width: 120px;height: 30px;margin: 0 10px;}div ul {display: flex;width: 100%;height: 550px;list-style: none;text-decoration: none;}div ul li {float: left;width: 80px;height: 80px;line-height: 80px;text-align: center;border: 1px solid black;}.f1-1 {flex-flow: row nowrap;}.f1-2 {flex-flow: row-reverse nowrap;}.f1-3 {flex-flow: column nowrap;}.f1-4 {flex-flow: column-reverse nowrap;}.f2-1 {flex-flow: row nowrap;}.f2-2 {flex-flow: row wrap;}.f2-3 {flex-flow: row wrap-reverse;}.f3-1 {justify-content: flex-start;}.f3-2 {justify-content: flex-end;}.f3-3 {justify-content: center;}.f3-4 {justify-content: space-around;}.f3-5 {justify-content: space-between;}.f3-6 {justify-content: space-evenly;}.f4-1 {align-items: flex-start;}.f4-2 {align-items: flex-end;}.f4-3 {align-items: center;}.f4-4 {align-items: stretch;}.f4-5 {align-items: baseline;}.f5-1 {flex-flow: row wrap;align-content: flex-start;}.f5-2 {flex-flow: row wrap;align-content: flex-end;}.f5-3 {flex-flow: row wrap;align-content: center;}.f5-4 {flex-flow: row wrap;align-content: stretch;}.f5-5 {flex-flow: row wrap;align-content: space-around;}.f5-6 {flex-flow: row wrap;align-content: space-between;}.f6-1 {flex: 1;}.f6-2 {flex: 2;}.f6-3 {flex: 3;}.f6-4 {flex: 4;}</style></head><body><h4>flex-direction 属性用来决定主轴的方向</h4><button onclick="fn('f1','1')">row(默认)</button><button onclick="fn('f1','2')">row-reverse</button><button onclick="fn('f1','3')">column</button><button onclick="fn('f1','4')">column-reverse</button><hr /><h4>flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行</h4><button onclick="fn('f2','1')">nowrap(默认)</button><button onclick="fn('f2','2')">wrap</button><button onclick="fn('f2','3')">wrap-reverse</button><hr /><h4>justify-content 属性用于设置弹性盒子中元素在主轴方向上的对齐方式</h4><button onclick="fn('f3','1')">flex-start(默认)</button><button onclick="fn('f3','2')">flex-end</button><button onclick="fn('f3','3')">center</button><button onclick="fn('f3','4')">space-around</button><button onclick="fn('f3','5')">space-between</button><button onclick="fn('f3','6')">space-evenly</button><hr /><h4>align-items属性用来设置弹性盒子中元素在侧轴方向上的对齐方式（单行，即，direction:nowrap）</h4><button onclick="fn('f4','1')">flex-start(默认)</button><button onclick="fn('f4','2')">flex-end</button><button onclick="fn('f4','3')">center</button><button onclick="fn('f4','4')">stretch</button><button onclick="fn('f4','5')">baseline</button><hr /><h4>align-content属性用来设置弹性盒子中元素在侧轴方向上的对齐方式（多行，即，direction:wrap）</h4><button onclick="fn('f5','1')">flex-start(默认)</button><button onclick="fn('f5','2')">flex-end</button><button onclick="fn('f5','3')">center</button><button onclick="fn('f5','4')">stretch</button><button onclick="fn('f5','5')">space-between</button><button onclick="fn('f5','6')">space-around</button><hr /><h4>flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写</h4><button onclick="custom()">自定义宽度</button><div><ul><li>A</li><li>B</li><li>C</li><li>D</li><li x>E</li><li x>F</li><li x>G</li><li x>H</li><li x>I</li><li x>J</li><li x>K</li><li x>L</li><li x>M</li><li x>N</li><li x>O</li><li x>P</li></ul></div><script>let nodes = document.querySelector("ul");function fn(type, no) {changeStretch(false);switch (type) {case "f2":document.querySelectorAll("li").forEach((item) => {if (item.hasAttribute("x")) {item.removeAttribute("hidden");}});break;case "f1":case "f3":document.querySelectorAll("li").forEach((item) => {if (item.hasAttribute("x")) {item.setAttribute("hidden", true);}});break;case "f4":document.querySelectorAll("li").forEach((item) => {if (item.hasAttribute("x")) item.setAttribute("hidden", true);if (no === "4") changeStretch(true);});break;case "f5":document.querySelectorAll("li").forEach((item) => {if (item.hasAttribute("x")) item.removeAttribute("hidden");if (no === "4") changeStretch(true);});break;default:break;}nodes.className = type + "-" + no;}function changeStretch(state) {document.querySelectorAll("li").forEach((item) => {if (state) {item.style.height = "100%";} else {item.style.height = "80px";}});}function custom() {const list = document.querySelectorAll("li");list.forEach((item, index) => {if (index < 4) {item.className = `f6-${index}`;}if (item.hasAttribute("x")) {item.setAttribute("hidden", true);}});}</script></body>
</html>

线上运行项目

flex布局演示(可线上运行项目)相关推荐

线上运行的项目突然变得很卡如何排查？
线上运行的项目突然变得很卡如何排查? 我们可能在项目部署后遇到一些问题,某一块模块功能或者全部的模块功能在某一时间段特别卡,我们应该如那些方面去排查呢?接下来我们一起去探究一下. 1.如果 ...
我们有一个线上的项目，刚启动完就占用了超过 1.5G，一次大量 JVM Native 内存泄露的排查分析（64M 问题）
我们有一个线上的项目,刚启动完就占用了使用 top 命令查看 RES 占用了超过 1.5G,这明显不合理,于是进行了一些分析找到了根本的原因,下面是完整的分析过程,希望对你有所帮助. 会涉及到下面这些 ...
「newbee-mall新蜂商城开源啦」SpringBoot+MyBatis开发JavaWeb线上商城项目
我的想法很简单,就是做一个大家都能运行的商城项目,而不是缺胳膊少腿的项目,不求有多么完善,也不求有多少技术栈,我目前的想法就是大家都可以运行它.使用它,至于完善它嘛,给我点时间哈. 本项目开源地址: ...
Flex布局演示01
Flex布局演示01 2009年,W3C 提出了一种新的方案--Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. ...
python怎么升级django_线上Django项目python2到3升级日记
这两天干了一个几斤疯狂的事情,花不到一个工作日的时间把一个线上Django项目语言版本从python2升级到Python3 1.字典的一个语法变化 Python2.7: if dict1.haskey ...
linux上运行项目,发布项目到 Linux 上运行 Core 项目
目录索引简介 ASP.Net Core 给我们带来的最大的亮点就是跨平台,我在我电脑(win7)上用虚拟机建了个 CentOS7 ,来演示下,我们windows上的项目如何发布项目到Linux上运行 ...
J2EE远程调试，远程debug你的线上Springboot项目
2019独角兽企业重金招聘Python工程师标准>>> 开发环境中代码出错了,可以利用IDE的debug功能来进行调试.那线上环境出错呢? 一.假设我们的项目是部署在tomcat中, ...
android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮，在键盘弹起后挡住input输入框的问题...
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡 ...
开源的线上商城项目收集
1.创创猫java单商户商城-品牌自营如三只松鼠创创猫B2C单商户电商系统,是一款完善且经过线上验证的Java电商系统. 商城前端使用uni-app开发, 可打包部署到微信小程序, APP, H5, ...

flex布局演示(可线上运行项目)

flex布局演示（可线上运行项目）

flex布局演示(可线上运行项目)相关推荐

最新文章

热门文章