弹性盒模型-主轴方向设置

最新推荐文章于 2023-11-29 22:05:53 发布
最新推荐文章于 2023-11-29 22:05:53 发布
阅读量8.8k 收藏 4
点赞数 1
分类专栏： 移动端开发深度揭秘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/88836198
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			#box{
				height: 200px;
				border: 1px solid #000;
				/*新版弹性盒模型*/
				/*display: flex;*/
				/*设置主轴方向为水平方向*/
				/*flex-direction: row;*/
				/*设置主轴方向为竖直方向*/
				/*flex-direction: column;*/
				
				
				/*老版弹性盒模型*/
				display: -webkit-box;
				/*设置主轴方向为水平方向*/
				-webkit-box-orient: horizontal;
				/*设置主轴方向为竖直方向*/
				-webkit-box-orient: vertical;
			}
			#box div{
				width: 50px;
				height: 50px;
				background-color: #f00;
				font-size: 40px;
				color: #F5F5F5;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

在这里插入图片描述
/设置主轴方向为水平方向,元素排列为反序/
display: flex;
flex-direction: row-reverse;

在这里插入图片描述

			/*设置主轴方向为竖直方向,元素排列为反序*/
			flex-direction: column-reverse;

在这里插入图片描述

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;

在这里插入图片描述

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;

在这里插入图片描述

==============================================

注意webkit内核必须加-webkit-前缀
第一个属性是 flex-direction 是确定主轴的方向
row：主轴方向是水平 从左到右。
column：主轴方向是垂直 从上到下。
row-reverse: 与row相反
column-reverse： 与colunmn相反
在这里插入图片描述
第二个属性是flex-wrap 有三个值 wrap nowrap wrap-reverse
wrap 换行 第二行在下面。
nowrap 不换行
wrap-reverse 换行第二行在上面。

在这里插入图片描述
第三个 justify-content属性 主要是主轴上对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
在这里插入图片描述
第四个属性：align-items 与 justify-content 属性相似 是在交叉轴上对其方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

第五个属性：align-conent 是多个轴线等情况下
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

新版弹性盒子模型
flex-grow: 1;
老版弹性盒子模型
-webkit-box-flex: 1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			#box{
				height: 300px;
				border: 1px solid #000;
				/*新版弹性盒子模型*/
				/*display: flex;*/
				
				/*老版弹性盒子模型*/
				display: -webkit-box;
			}
			#box div{
				/*新版弹性盒子模型*/
				/*flex-grow: 1;*/
				/*老版弹性盒子模型*/
				-webkit-box-flex: 1;
				
				height: 50px;
				background-color: #f00;
				font-size: 30px;
				color: #fff;
			}
			#box div:nth-of-type(2){
				flex-grow: 2;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

在这里插入图片描述
元素具体位置设置：
老版
display: flex;
order:数值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			#box{
				height: 300px;
				border: 1px solid #000;
				display: flex;
			}
			#box div{
				width:50px;
				height: 50px;
				background-color: #f00;
				font-size: 30px;
				color: #fff;
			}
			#box div:nth-of-type(1){
				/*数值越小越靠前,可以接受0或者负数值*/
				order: 5;
			}#box div:nth-of-type(2){
				order: 2;
			}
			#box div:nth-of-type(3){
				order: 3;
			}
			#box div:nth-of-type(4){
				order: 4;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

在这里插入图片描述
新版
display: -webkit-box;

-webkit-box-ordinal-group: 1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
			}
			#box{
				height: 300px;
				border: 1px solid #000;
				display: -webkit-box;
			}
			#box div{
				width:50px;
				height: 50px;
				background-color: #f00;
				font-size: 30px;
				color: #fff;
			}
			#box div:nth-of-type(1){
				/*数值越小越靠前，最小默认值处理为1*/
				-webkit-box-ordinal-group: 5;
			}#box div:nth-of-type(2){
				-webkit-box-ordinal-group: 2;
			}
			#box div:nth-of-type(3){
				-webkit-box-ordinal-group: 3;
			}
			#box div:nth-of-type(4){
				-webkit-box-ordinal-group: 4;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

在这里插入图片描述

原文：https://blog.csdn.net/q970654226/article/details/80500128

我的奋斗ing
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性盒子-修改主轴方向
weixin_57936267的博客
05-16 1330
代码： <!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&
Flex弹性布局
m0_74284133的博客
05-11 885
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
23-lao-弹性盒子布局介绍与主轴的方向设置
huantingyizhan的博客
07-15 868
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap{ width: 960px; border: 1...
弹性盒子(flex) 改变主轴和强制换行
alienwareye的博客
11-11 3597
多行侧轴垂直排列 ,中间按照1比1划分。多行侧轴垂直排列 ,中间按照1比2划分。主轴两边靠边,中间自适应。flex默认的主轴是水平方向上的。2.flex(弹性盒子)强制换行。侧轴两边靠边,中间自适应。多行侧轴垂直排列 ,中间对齐。侧轴从最后一个开始排列。侧抽为垂直方向上的y轴.侧轴从第一个开始排列。默认方向值为 row。
弹性盒布局
weixin_42447364的博客
06-12 1008
flex 弹性盒子 两列布局
实现弹性盒子改变元素排列方向
weixin_43273592的博客
03-09 150
Flex布局模型中，弹性盒子默认沿着水平方向排列.如何实现以下这种排列效果?flex-direction即可。使用algin-content属性实现多行排列效果。
css3弹性盒模型（Flexbox）详细介绍
09-25
CSS3的弹性盒模型，又称为Flexbox，是一种强大的布局工具，它允许开发者轻松地创建响应式和动态的布局，特别是在处理复杂的垂直和水平对齐问题时。Flexbox的主要目标是提供一种更灵活的方式来控制元素在容器内的排列...
CSS弹性盒模型flex在布局中的应用详解
09-24
CSS弹性盒模型（Flexbox）是一种现代的布局模式，它为复杂的网页布局提供了一种更为灵活的方法。在传统的CSS布局中，如浮动和定位，往往难以处理多行或多列的动态内容，而Flexbox则可以轻松实现这些需求。本文将深入...
14-弹性盒导航.html
09-04
1)弹性盒也叫伸缩布局盒模型 它是**<span>css3**引入的一种新的布局模式——**<span>flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
My-Site:弹性盒模型
03-13
- `flex-direction`: 决定项的主轴方向（默认为row，可设置为row-reverse、column或column-reverse）。 - `flex-wrap`: 控制是否允许项换行（默认为nowrap，可设置为wrap或wrap-reverse）。 - `justify-content`:...
弹性布局----改变主轴的方式及换行和多行排列
zheshihuahua的博客
05-15 3250
在弹性布局中，一般默认的主轴是水平方向的轴，但是通过 “flex-direction: column; ”可以把竖直方向的轴变成主轴，具体操作 ： /* 弹性容器 */ display: flex; /* 改变主轴 ，把Y轴变成主轴 */ /* flex-direction: column; */ /* 侧轴居中 */ /* align-items: center; */ /* 反转排列方式 从下往上 1号盒子在下面 2号在上面*/ /* flex-direction: column-rev
弹性盒子布局
Dennis_nafla的博客
07-16 328
主轴排列方向是指在主轴上，弹性盒子中的项目（子元素）是如何排列的。主轴是弹性盒子布局中的一个方向，它定义了弹性盒子的主要方向。在弹性盒子布局（flexbox）中，存在两个关键概念：主轴（main axis）和交叉轴（cross axis）。对于每次找到的mid，判断以mid为把n个数分成tot段后每段中的最大值。如果tot<题目所给的段数，说明mid大了，所以r = mid。否则就sum=0，sum = a[i]，tot++，新开一段。首先确定范围，这题的答案的最小值应该是分n段，即每个数一段。
弹性盒模型布局方式
civet_me的博客
07-07 1144
问题提出 在做前端页面的时候，经常会遇到几个问题 1、布局问题，左右两列布局，左侧固定宽度，右侧自适应；左中右三列布局，左右固定宽度，中间自适应； 2、一个div，上下左右居中； 在前端工作中，这两个问题可以说是层出不穷。在布局上有经典的双飞翼布局、圣杯布局等。这些布局就是利用float、position等属性，使其中一部分脱离文档流。而div上下左右居中，...
day17-弹性盒布局
user_lc的博客
10-29 207
弹性盒布局
css3弹性盒子模型（Flex）
张先生的前端日志
09-13 951
Flex弹性盒子是 CSS3 的一种新的布局模式.，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
css弹性盒子（flex）
ghjkfuihg的博客
07-31 463
注意主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的。采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为Flex项目。flex-start默认值从头部开始如果主轴是x轴，则从左到右。space-between子项在侧轴先分布在两头，再平分剩余空间。flex-direction属性决定主轴的方向（项目的排列方向）属性是flex-direction和flex-wrap属性的复合属性。...
什么是（flex）弹性盒子主轴和侧轴
qq_44716411的博客
08-18 2191
（flex）弹性盒子的主轴和侧轴 弹性盒子分为主轴和侧轴（又称交叉轴） 属性：flex-direction 主轴设置：flex-direction ：row 或row-reverse 主轴通俗来讲就是，X轴 侧轴设置：flex-direction ：column 或column-reverse 侧轴通俗来讲就是，y轴 ...
flex-修改主轴方向，弹性盒子换行与调节行对齐方式
m0_57851747的博客
11-29 881
flex-修改主轴方向，弹性盒子换行与调节行对齐方式。flex-direction改变元素排列方向，要注意主轴方向修改侧轴也会随之变化，两轴始终相互垂直。子元素宽度发生了改变，使其宽度总和等于父元素，子元素会被压缩或者拉伸，所以才叫弹性盒子。在上面的例子我们看到了换行后自动给出了均匀的间隙，要修改就得调节行对其方式。在flex盒子中主轴方向默认是水平方向，侧轴默认是垂直方向
css 弹性盒子模型
最新发布
05-29
4. justify-content属性：指定了弹性容器内弹性项在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-between和space-around等值。 5. align-items属性：指定了弹性容器内弹性项在侧轴方向上的对齐...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值