部分弹性盒子属性用法

最新推荐文章于 2024-08-30 15:33:13 发布
最新推荐文章于 2024-08-30 15:33:13 发布
阅读量34 收藏
点赞数
文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ike_kenny/article/details/133420075
版权

order

order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
可以 为负值，属性设置弹性容器内弹性子元素属性 。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			order: -1;
			
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: orange;
			order: 1;
			
			
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			order: -2;
			
			
		}
		</style>
	</head>
	<body>
	<div class="boss">
		<div class="box1">22222</div>
		<div class="box2">333333</div>
		<div class="box3">4444</div>
	</div>
	
</body>
</html>

在这里插入图片描述

align-self

属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。注：给子元素设置
语法： auto | flex-start | flex-end | center | baseline | stretch

1. auto

如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。

		.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			align-items: center;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			align-self: auto;
			
		}

在这里插入图片描述

2. flex-end

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

	.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			align-items: center;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			align-self: auto;
			
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: orange;
			align-self: flex-end;
			
			
		}

在这里插入图片描述

3. flex-start

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

		.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			align-items: center;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			align-self: auto;
			
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: orange;
			align-self: flex-start;
			
			
		}

在这里插入图片描述

4. center

弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

		.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			align-self: auto;
			
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: orange;
			align-self: flex-start;
			
			
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			align-self: center;
			
			
		}

在这里插入图片描述

5. baseline

如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。

	.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			align-items: center;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			align-self: auto;
			
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: orange;
			align-self: flex-start;
			
			
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			align-self: baseline;
			
			
		}

在这里插入图片描述

6. stretch

如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

		.boss {
			width: 400px;
			height: 300px;
			border: 1px solid red;
			display: flex;
			flex-flow: wrap;
			align-items: center;
		}
		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
			align-self: auto;
			
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: orange;
			align-self: flex-start;
			
			
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			align-self: stretch;
			
			
		}

在这里插入图片描述

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
flex-flow:flex-direction flex-wrap;复合属性
flex-direction代表的值有：row|row-reverse|column|column-reverse
flex-wrap代表值有：nowrap|wrap|wrap-reverse

ike_kenny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html5弹性盒子的属性,弹性盒布局常用属性列举【web前端】
weixin_39631755的博客
06-07 1456
弹性盒子是一种非常灵活的布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置，下面我么来看看弹性盒子的几种属性。1. display属性display属性用于指定元素容器的类型，其默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符;如果设置display的值为flex，则表示用于指定弹性盒的容器;如果设置display的值为none，则表示此元素不会被显示...
弹性盒子简单用法
qq_36262295的博客
11-14 1203
弹性盒子 可以简洁，完整，响应式(自适应)的实现各种页面布局 采用flex布局的元素，称为弹性盒子 或者 flex容器， 他的所有子元素称为弹性元素 或者 flex项目 主轴：元素盒子排列的方向（默认的排列方向x轴， 当然不是说主轴就是x，因为我们可以通过属性来 改变主轴的方向） 交叉轴：和主轴垂直的轴 弹性盒子属性/容器属性： flex-direction 改变主轴的方向。 属性值有四种情况： {flex-direction: row;}/默认值，从左往右排列/ {flex-direction:
Php弹性盒子属性,Flexible弹性盒子模型之CSSorder属性
weixin_35700754的博客
04-14 119
实例设置弹性盒对象元素的顺序：p#myRedp{order:2;}p#myBluep{order:4;}p#myGreenp{order:3;}p#myPinkp{order:1;}手册网(www.shouce.ren)#main {width: 400px;height: 150px;border: 1px solid #c3c3c3;display: -webkit-flex; /* Safa...
弹性盒子及用法
n9_333的博客
09-25 144
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。
CSS3 弹性盒子的常用属性
xh0112的博客
12-21 4731
弹性盒子flex 弹性盒子用弹性盒子来实现居中弹性盒子与浮动比较flex声明flex-direction属性flex-wrap属性justify-content属性align-items属性align-self属性，用于单个元素flex-grow属性flex-shrink属性flex-basis属性复合写法flex的用法order属性 flex 弹性盒子 用弹性盒子来实现居中 传统方法是绝对定位来实现的。 用弹性盒子更简单更方便。 绝对定位： 实现居中： 用弹性盒子来实现： 达到的效果和绝对定位的效
【Flex弹性盒子基本属性】
Lnbd_的博客
01-10 516
Flex弹性盒子基本属性
弹性盒子的使用
weixin_52655964的博客
08-26 926
这个是CSS3中新增的一种布局的方案，用来代替传统的布局方案的。弹性盒子可以更标准的进行网页的布局。布局中无非就是横平竖直我们称我们设置了弹性盒子属性的元素为容器。如何才能把一个元素变成弹性盒子 ？ 选择器 { display: flex; } 只要我们添加了该属性，那么这个元素就是一个弹性盒子，弹性盒子是在块元素和行内元素之外的一种新的元素形式。可以设置宽高，并且没有任何的之前我们会出现的问题。主副轴在容器中，会有两类轴，主轴和副轴。主轴默认为横轴（横着的线），副轴默认为纵轴（竖着的线）主副轴可以进
弹性盒子的属性和用法
2301_77661976的博客
01-14 367
flex-start表示顶部对齐，center表示居中对齐，flex-end表示底部对齐，space-between 表示两端对齐并且行与行之间平均分配空间，space-around 表示每行两侧都留出相等的空白空间，stretch表示拉伸填满整个交叉轴。flex-start表示靠左/靠上，center表示居中对齐，flex-end表示靠右/靠下，space-between 表示两端对齐并且子元素之间平均分配空间，space-around 表示每个子元素两侧都留出相等的空白空间。
CSS 弹性盒子布局使用方法介绍
Jay的博客
10-25 2609
CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。
css弹性盒子属性及其用法
weixin_30376323的博客
04-04 702
弹性盒子模型 display：flex；先将元素变成弹性容器，那么这个元素中的子元素自然而然就变成了弹性子元素。（容器是一个块状元素） display：inline-flex；容器是一个行内flex元素 弹性盒子属性： flex-direction:弹性子元素的排列方式（主轴排列方式） flex-warp:设置弹性盒子的子元素是否换行 flex-flow:flex-direction 和 flex...
AngularJS 实现弹性盒子布局的方法
10-21
在前端开发中，布局设计是至关重要的，而弹性盒子（Flexbox）布局提供了一种更加灵活、响应式的解决方案。AngularJS作为一个强大的JavaScript框架，也可以很好地与Flexbox结合，实现动态和自适应的页面布局。本文将...
html弹性盒子布局,实例讲解CSS3中的box-flex弹性盒属性布局
weixin_36048031的博客
06-30 737
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。CSS Code复制内容到剪贴板111...
CSS3弹性盒子（新）（属性用法）
ssj2595622102的博客
06-15 140
用法：align-content：flex-start | flex-end | center | space-between | space-around | stretch。flex：none | flex-grow （子元素的拓展比例）| flex-shrink （子元素的收缩比例）|flex-basis（子元素的默认基准值）如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
CSS中禁用DOM事件
bingmoujs的博客
08-26 682
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css的position定位的属性
最新发布
qq_43235503的博客
08-30 201
css的position定位的属性
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 492
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
CSS学习3
qq_54641174的博客
08-29 436
css样式表
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 287
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
在React中使用TypeScript和Material-UI v5时，要为单个.tsx文件创建一个局部作用域的.scss文件如何做? 另外主题如何获取呢?
qq_42391246的博客
08-30 285
使用CSS模块的好处是你可以编写普通的CSS（或SCSS），并且所有类名都会自动转换为唯一的局部作用域名。这意味着你可以在不同的组件中自由地使用相同的类名，而不用担心它们之间的样式冲突。使用CSS变量的好处是你可以在SCSS文件中保持样式的封装，同时能够利用React的上下文来动态地更改这些值。文件中使用MUI的主题，你需要采取不同的方法，因为SCSS文件不直接访问到React的上下文中的主题对象。另一种方法是在你的JSX中定义CSS变量，并在SCSS文件中使用这些变量。文件中，编写你的样式。
css 弹性盒子模型
05-29
使用弹性盒子模型可以轻松实现复杂的布局结构，而不需要使用传统的浮动和定位方法。 弹性盒子模型中，通过在容器上设置display:flex或display:inline-flex属性来将一个元素定义为弹性容器，容器内的子元素则成为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值