27-lao-弹性盒子的排序和放缩

最新推荐文章于 2023-11-09 10:37:47 发布
翻译 最新推荐文章于 2023-11-09 10:37:47 发布 · 250 阅读 · 0 

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 960px;
				border: 1px solid #ccc;
				margin: 5px auto;
				text-align: center;
			}
			
			.wrap .hd {
				height: 50px;
				border: 1px solid #ccc;
				background-color: #EE82EE;
				font: 16px/1.5 "微软雅黑";
				opacity: .8;
				/*设置模糊度*/
			}
			/*加入弹性盒子*/
			
			.wrap .bd {
				display: flex;
			}
			
			.wrap .bd .child {
				width: 100px;
				height: 100px;
				border: 3px solid #333333;
				background-color: #7FFFD4;
				/*padding-top: 15px;*/
			}
			
			.row {
				flex-direction: row;
			}
			
			.row-reverse {
				flex-direction: row-reverse;
			}
			
			.column {
				flex-direction: column;
			}
			
			.column-reverse {
				flex-direction: column-reverse;
			}
			
			.flex-wrap {
				flex-wrap: wrap;
			}
			
			.flex-nowrap {
				flex-wrap: nowrap;
			}
			
			.flex-wrap-reverse {
				flex-wrap: wrap-reverse;
			}
			/*=======设置父盒子的  子元素的排列间隙==========*/
			
			.justify-content-flex-start {
				justify-content: flex-start;
				/*默认左对齐*/
			}
			
			.justify-content-flex-end {
				justify-content: flex-end;
				/*右对齐*/
			}
			
			.justify-content-center {
				justify-content: center;
				/*居中对齐*/
			}
			
			.justify-content-space-around {
				justify-content: space-around;
				/* 每个项目两侧间隔相等 */
			}
			
			.justify-content-space-between {
				justify-content: space-between;
				/* 两端对齐*/
			}
			/*=========设置父盒子侧轴 子元素对齐方式=========*/
			
			.align-items-flex-start {
				align-items: flex-start;
				/* 顶部对齐*/
			}
			
			.align-items-flex-end {
				align-items: flex-end;
				/* 底部对齐*/
			}
			
			.align-items-center {
				align-items: center;
				/* 中心对齐*/
			}
			
			.align-items-baseline {
				align-items: baseline;
				/* 中心对齐*/
			}
			
			.align-items-stretch {
				align-items: stretch;
				/* 中心对齐*/
			}
			/*S=>设置父盒子 多行子元素垂直对齐方式*/
			.align-content-flex-start{
				align-content: flex-start;
			}
			.align-content-flex-end{
				align-content: flex-end;
			}
			.align-content-center{
				align-content:center;
			}
			.align-content-space-between{
				align-content: space-between;
			}
			.align-content-space-around{
				align-content: space-around;
			}
			.align-content-sstretch{
				align-content: stretch;
			}
			
			/*E=>设置父盒子 多行子元素垂直对齐方式*/
		</style>
	</head>

	<body>
		<h3>5、多行子元素的对齐方式</h3>
		<hr />
		
		<div class="wrap">
			
		  <div class="hd">
				多行子元素的对齐方式 align-content: sstretch;
			</div>
			<div class="bd row flex-wrap  align-content-stretch"   >
				<!--默认的都是0
					可以随意的排序，不受父盒子的影响   order
				-->
				<div class="child"style=""> 1</div>
				<div class="child" style="order: 1;">2</div>
				<div class="child">3</div>
				<div class="child">4</div>
				<div class="child">5</div>
				
			</div> 
		
	     </div>
		
		
		
	</body>


<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 960px;
				border: 1px solid #ccc;
				margin: 5px auto;
				text-align: center;
			}
			
			.wrap .hd {
				height: 50px;
				border: 1px solid #ccc;
				background-color: #EE82EE;
				font: 16px/1.5 "微软雅黑";
				opacity: .8;
				/*设置模糊度*/
			}
			/*加入弹性盒子*/
			
			.wrap .bd {
				display: flex;
			}
			
			.wrap .bd .child {
				width: 100px;
				height: 100px;
				border: 3px solid #333333;
				background-color: #7FFFD4;
				/*padding-top: 15px;*/
			}
			
			.row {
				flex-direction: row;
			}
			
			.row-reverse {
				flex-direction: row-reverse;
			}
			
			.column {
				flex-direction: column;
			}
			
			.column-reverse {
				flex-direction: column-reverse;
			}
			
			.flex-wrap {
				flex-wrap: wrap;
			}
			
			.flex-nowrap {
				flex-wrap: nowrap;
			}
			
			.flex-wrap-reverse {
				flex-wrap: wrap-reverse;
			}
			/*=======设置父盒子的  子元素的排列间隙==========*/
			
			.justify-content-flex-start {
				justify-content: flex-start;
				/*默认左对齐*/
			}
			
			.justify-content-flex-end {
				justify-content: flex-end;
				/*右对齐*/
			}
			
			.justify-content-center {
				justify-content: center;
				/*居中对齐*/
			}
			
			.justify-content-space-around {
				justify-content: space-around;
				/* 每个项目两侧间隔相等 */
			}
			
			.justify-content-space-between {
				justify-content: space-between;
				/* 两端对齐*/
			}
			/*=========设置父盒子侧轴 子元素对齐方式=========*/
			
			.align-items-flex-start {
				align-items: flex-start;
				/* 顶部对齐*/
			}
			
			.align-items-flex-end {
				align-items: flex-end;
				/* 底部对齐*/
			}
			
			.align-items-center {
				align-items: center;
				/* 中心对齐*/
			}
			
			.align-items-baseline {
				align-items: baseline;
				/* 中心对齐*/
			}
			
			.align-items-stretch {
				align-items: stretch;
				/* 中心对齐*/
			}
			/*S=>设置父盒子 多行子元素垂直对齐方式*/
			
			.align-content-flex-start {
				align-content: flex-start;
			}
			
			.align-content-flex-end {
				align-content: flex-end;
			}
			
			.align-content-center {
				align-content: center;
			}
			
			.align-content-space-between {
				align-content: space-between;
			}
			
			.align-content-space-around {
				align-content: space-around;
			}
			
			.align-content-sstretch {
				align-content: stretch;
			}
			/*E=>设置父盒子 多行子元素垂直对齐方式*/
		</style>
	</head>

	<body>

		<div class="wrap">
			<h3>1.设置盒子的放大比例</h3>
			<hr />
			<div class="hd">
				设置盒子的放大比例 flex-grow
			</div>
			<div class="bd row flex-wrap  align-content-stretch">
				<!--若盒子没有铺满，则按照放大的比例进行填充  铺满则不按照比例放大-->
				<div class="child" style="flex-grow: 4;"> 1</div>
				<div class="child" style="flex-grow: 2;">2</div>
				<div class="child" style="flex-grow: 1;">3</div>

			</div>
			<h3>2.设置盒子的缩小比例</h3>
			<hr />
			<div class="hd">
				设置盒子的缩小比例 flex-shrink
			</div>
			<div class="bd row  align-content-stretch">
				<!--若盒子放不下，则按照缩小的比例进行填充  没有铺满则不按照比例缩小
					默认为0
				-->
				<div class="child" style="flex-shrink: 4;"> 1</div>
				<div class="child" style="flex-shrink: 2;">2</div>
				<div class="child" style="flex-shrink: 1;">3</div>
				<div class="child" style="flex-shrink: 1">1</div>
				<div class="child" style="flex-shrink:1">2</div>
				<div class="child" style="flex-shrink:1">3</div>
				<div class="child" style="flex-shrink:1">4</div>
				<div class="child" style="flex-shrink:11">5</div>
				<div class="child" style="flex-shrink:1">6</div>
				<div class="child" style="flex-shrink:1">7</div>
				<div class="child" style="flex-shrink:1">8</div>
				<div class="child" style="flex-shrink:1">9</div>
			</div>

		</div>

	</body>

CSS3 弹性盒子(Flex Box)
JustinNeil的博客
06-02 443
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex it...
弹性盒模型布局方式
civet_me的博客
07-07 1224
问题提出 在做前端页面的时候，经常会遇到几个问题 1、布局问题，左右两列布局，左侧固定宽度，右侧自适应；左中右三列布局，左右固定宽度，中间自适应； 2、一个div，上下左右居中； 在前端工作中，这两个问题可以说是层出不穷。在布局上有经典的双飞翼布局、圣杯布局等。这些布局就是利用float、position等属性，使其中一部分脱离文档流。而div上下左右居中，...
弹性盒子布局
flower521528的博客
03-23 670
弹性盒子也是布局的一种方式，用起来也是很nice，用于移动端也是很nice。接下来我为大家介绍下弹性盒子的语法和布局。 一、 弹性盒子的布局与之前不同，由主轴（横轴）和交叉轴（纵轴金进行布局） 1、主轴 justify-content:flex-start 按照主轴左对齐 justify-content:flex-end 按照主轴右对齐 justify-content:center 按照主轴居中对齐 justify-content:space-between 每两
弹性盒布局
szydqq的博客
03-10 1954
弹性盒布局
tesseract-langpack-lao-4.0.0-6.el8.x64-86.rpm.tar.gz
04-05
文件的标题“tesseract-langpack-lao-4.0.0-6.el8.x64-86.rpm.tar.gz”已经清晰地指示了包的名称、版本、适用于的系统架构和操作系统版本。首先，"tesseract-langpack-lao"表明这是针对老挝语言的Tesseract语言包。...
tesseract-script-lao-4.0.0-6.el8.x64-86.rpm.tar.gz
04-06
Centos8操作系统tesseract-script-lao-4.0.0-6.el8.rpm以及相关依赖，全打包为一个tar.gz压缩包 2、安装指令： #Step1、解压 tar -zxvf tesseract-script-lao-4.0.0-6.el8.tar.gz #Step2、进入解压后的目录，执行...
google-noto-serif-lao-fonts-20141117-5.el7.x64-86.rpm.tar.gz
01-25
剩余的两个rpm文件分别是指定字体包“google-noto-serif-lao-fonts-20141117-5.el7.noarch.rpm”和字体包的通用组件“google-noto-fonts-common-20141117-5.el7.noarch.rpm”。文件名称中的“Noarch”表示该软件包是...
Y-Lao_GuYue-Admin_75452_1754650682476.zip
最新发布
08-12
标题中“Y-Lao_GuYue-Admin_75452_1754650682476.zip”暗示了一个特定的文件命名规则，可能用于内部标识或版本控制。标题中的“Admin”表明这是一个管理相关的文件包，而数字序列可能代表特定的版本号、日期或项目...
google-noto-sans-lao-ui-fonts-20141117-5.el7.x64-86.rpm.tar.gz
01-24
首先，文件标题中提及的是一个特定的字体包，名为“google-noto-sans-lao-ui-fonts”，版本为20141117，以及一个特定的构建号5，针对的是64位的Linux系统。文件的具体格式为RPM包，这是一种在Linux系统中用于软件...
弹性盒子布局 flex
qq_44917015的博客
12-07 301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style>
html5盒子内排列模型,flex-direction css3属性设定弹性盒子模型子元素反向排列
weixin_34191434的博客
06-08 463
设定弹性盒子模型(display:flex)让子元素反向排列 示例说明：display: flex; 声明了盒子为flex弹性盒子布局，flex: 1; 声明了子元素占1份，flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/设定弹性盒子模型(display:flex)让子元素反向排列http://zhidao.51xuediannao.com/threa...
html弹性盒子垂直排列,弹性盒布局的4种常用属性演示【前端技术文章】
weixin_28675557的博客
06-16 6194
弹性盒子是一种非常灵活的布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置，下面我么来看看弹性盒子的几种属性。1. display属性display属性用于指定元素容器的类型，其默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符;如果设置display的值为flex，则表示用于指定弹性盒的容器;如果设置display的值为none，则表示此元素不会被显示...
弹性盒子(display:flex)详解
m0_68845148的博客
11-09 1万+
在css中我们使用display大多都是用来转换元素类型的，这种方法在我们实现页面布局中大部分地方都很好用，但难免还是会有一定的局限性，那么弹性盒子就有可能帮助我们更好的去进行批量改变子元素的布局。
css3常用到的弹性盒子相关样式总结
weixin_43048954的博客
05-19 442
css3常用到的弹性盒子相关样式总结 首先涉及到弹性盒子的所有样式分2种，第一种是给父元素设置的一些样式，第二种是给子元素设置的一些样式。接下来以这个思路来整理添加各样式页面布局所产生的效果。（开启弹性盒子功能首先要给元素设定display: flex样式） 常用给父元素设置的样式有：(flex容器，父容器) 1. display:flex ---> 正常 ...
超详细！弹性盒子(display:flex)
热门推荐
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
html怎么让盒子按顺序排下来,网页css布局，flex弹性盒子，子元素如何控制顺序位置？...
weixin_32902659的博客
06-04 2023
本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。苏南大叔继续描述flex弹性盒子模型的子元素属性，注意：说明对象以及从容器box，变成了子元素item。一些flex盒子的属性，其实是定义在item身上的。那么，这些属性都有什么呢？是什么控制了flex盒子内部的顺序及位置呢？网页css布局，flex弹性盒子，子元素如何控制顺序位置？(图3-1)本文测试环境：...
Go-Lao-SiJi: 高效Golang命令行网络爬虫
1. **Go-Lao-SiJi**: 此名称很可能是一个特定的项目或程序名称，其中“Go”指的是编程语言Golang，而“Lao-SiJi”可能是项目特定的术语，根据描述可能是一个针对经验丰富的用户的CLI（命令行界面）爬虫程序。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值