flex弹性盒子代码图片详细解释

最新推荐文章于 2024-05-07 16:23:54 发布
最新推荐文章于 2024-05-07 16:23:54 发布
阅读量460 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40322724/article/details/106361621
版权

一.开启了flex布局的元素叫做flex container

flex items默认都是沿着main axis(主轴)从main start开始往main end方向排布

al{      display: flex;   }
<div class="al">        
	<div class="z2">z2</div>        
	<div class="cl">c1</div>       
	<div class="z1">z1</div>   
</div>`

在这里插入图片描述

虽然z2，c1，z1是盒子块级，但是当父级al设置成 display: flex;他就不在成块级排列，默认成沿着main axis(主轴)从main start开始往main end方向排布。

1.开启flex布局

设置display属性为flex或者inline-flex可以成为flex container

flex以块级元素存在，inline-flex则会变成行内级

2.flex-direction：设置主轴方向

默认是row：flex-direction：row横向从左向右，row-reverse:横向反向，从右向左

column主轴方向从上向下，column-reverse：反向

 .al{       display: flex;       flex-direction: column;     }
3.justify-content:设置flex-items在主轴的对齐方式

flex-start：与main-start对齐；

flex-end：与main-end对齐；

center：居中对齐；

space-between：flex item间的距离相等，与main-start和main-end对齐

.

al{   width: 500px;   
		background-color: chocolate;            
		display: flex;            
		flex-direction: row; //横向主轴排列            
		justify-content: space-between;        
		}


<div class="al">        
	<div class="z2">z2</div>        
	<div class="cl">c1</div>        
	<div class="z1">z1</div>    
</div>

space-around：flex item间的距离相等，flex item与main-start和main-end之间的距离是flex item间的距离的一半

.al{           
	 width: 500px;            
	 background-color: chocolate;            
	 display: flex;            
	 flex-direction: row;            
	 justify-content: space-around;        
 }

<div class="al">        
	<div class="z2">z2</div>        
	<div class="cl">c1</div>        
	<div class="z1">z1</div> 
</div>

space-evenly：flex item间的距离相等，flex item与main-start和main-end之间的距离是flex item间的距离也相等

.al{            
	width: 500px;            
	background-color: chocolate;            
	display: flex;            
	flex-direction: row;            
	justify-content: space-evenly;        
}
<div class="al">        
	<div class="z2">z2</div>       
 	<div class="cl">c1</div>        
 	<div class="z1">z1</div>    
 </div>

在这里插入图片描述

4.align-items：决定flex-items在cross axis（交叉轴）上的对齐方式

normal：在弹性布局中和stretch一样

stretch：当flex items在交叉轴方向的size为auto时，会自动拉伸填充flex container
在这里插入图片描述

flex-start：与cross start对齐

flex-end：与cross end对齐

center：居中对齐

baseline：基线对齐

5.flex-wrap:默认情况下flex items是在一行显示的，当不够时候会压缩item宽度

normal：默认，单行显示

wrap：多行

wrap-reverse：多行相反

6.flex-flow是flex-direction和flex-wrap的缩写属性

flex-flow: row wrap;

7.align-content：决定了flex items在交叉轴的对齐方式，用法和justify-content类似

二.flex container里面的直接子元素叫flex items

1.order：决定了flex items的排列顺序

默认值是0，可以设置成任意的整数，值越小就排在前面。

 <style>        
 .al{            
	 width: 600px;            
	 height: auto;            
	 background-color: chocolate;            
	 display: flex;            
	 flex-direction: row;            
	 justify-content: space-evenly;        
 }        
 .z1{            
	 width: 200px;            
	 height: 200px;            
	 order: 5;            
	 background-color: red;        
 }        
 .z2{            
	 width: 100px;           
	  height: 100px;            
	  order: 2;            
	  background-color: royalblue;        
  }        
  .z3{            
	  width: 100px;            
	  height: 100px;            
	  order: 10;            
	  background-color: seagreen;            
	  display: inline-block;             
	  transition: width 5s linear 2s;        
  }        
  .z2:hover{            
  	width:200px;        
  }    
  </style>
  </head>
  <body>    
	  <div class="al">        
		  <div class="z1">z1</div>        
		  <div class="z2">z2</div>        
		  <div class="z3">z3</div>    
	  </div>  
  </body>
2.align-self:可以给item设置align-self来覆盖flex container设置的align-items

默认auto：遵从align-items设置。

3.flex-grow：决定items如何扩展。

可以设置任意的非负数，默认为0.当在主轴上有剩余空间时，才会生效。当所有的items的grow的总和sum大于一，则每个items扩展大小是：剩余sizeflex-grow/sum；如果sum小于1，则则每个items扩展大小是：剩余sizeflex-grow。

4.flex-shrink：决定items如何收缩

如果items的宽度和大于父元素即container，那么他们就会进行收缩。默认收缩时1.就是每个等分。

5.flex-basis:设置主轴的大小，不过一般用width直接设置。
6.flex:是flex-grow，flex-shrink，flex-basis的简写，可以指定一个值，两个值，三个值

单值：值必须是下面之一：1.一个无单位的数，它会被当flex-grow的值；2.一个有效的宽度值

双值：，第一个必须是无单位的数，它会被当flex-grow的值；第二个值：可以是无单位的数，可以是一个宽度值

三值：第一，第二必须是无单位的值，第三必须是有效的宽度值

qq_40322724
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性盒子布局（下面有代码）
xbl_001的博客
12-16 1736
弹性盒子布局（下面有代码） 语法：display:flex（设置弹性盒） 属性： flex-direction：决定主动方向 row：默认值，水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上 column-reverse：主轴为垂直方向，起点在下 flex-wrap：是否在一行显示 nowrap：默认，不换行 wrap：换行，第一行在上方显示 wrap-reverse：换行，第一行在下方显示 flex-f
【HTML+CSS】弹性盒子
LuWeien的博客
12-05 2179
box-sizing: content-box padding和border不会撑大盒子 元素的总宽度=width+左右的margin width=width+左右的padding+左右的border 元素的总高度=height+上下的margin height=height+上下的padding+上下的border 弹性盒子 弹性盒子是什么？ 是一种布局方式 弹性盒子元素的大小 排版 顺序都受到父元素的影响和控制 灵活控制子元素在父元素中水平垂直对齐方式 给一个元素设置了display
弹性盒子源代码（子元素设置的相关属性）
最新发布
kkaagf的博客
05-07 688
【代码】弹性盒子源代码。
CSS之弹性盒子Flexible Box
m0_74577714的博客
11-26 1112
我想大家在做布局的时候，没接触flex布局之前，大家都是用浮动来布局的，但现在我们接触了flex布局之后，我只能说：“真香”。让我为大家介绍一下弹性盒子模型吧！ Flexible Box 弹性盒子 在我们使用弹性盒子时，我们需要给父级添加display:flex; 这是没给父级添加display:flex;时的样子： 这是给父级添加了display:flex;时的样子： 大家看，这是不是浮动该做的事情呀，我们flex也可以做，而且可以更简单更轻松的完成我们的布局，让我为大家介绍一下吧！ 写在父级上常用的
Bootstrap的弹性盒子布局学习笔记
昊虹AI笔记
09-28 810
Bootstrap的弹性盒子布局学习笔记
html3d盒子相册源码,纯CSS3 3D盒子相册
weixin_39886024的博客
06-19 289
* {padding:0;margin:0;}body,html {background:#f0f0f0;}:root {--width:600px;--height:400px;}.content {width:600px;margin:100px auto;}.box {position:relative;perspective:500px;background:#fff;overflow:h...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
css弹性盒子（flex）管理系统布局
11-20
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
AngularJS 实现弹性盒子布局的方法
10-21
本文将详细介绍如何在AngularJS中实现弹性盒子布局。 首先，我们需要了解Flexbox的基本概念。弹性盒子模型允许我们定义容器（父元素）以及其子元素（子项）的行为，以适应不同的屏幕尺寸和设备类型。主要属性包括：...
怪异盒模型、弹性盒及相关属性的介绍
YY的博客
09-27 2351
怪异盒模型、弹性盒及相关属性的介绍
jQuery结合LightBox实现图片滚动 图片盒子.rar
07-10
jQuery结合LightBox实现的图片展示 图片盒子，图片滚动过程中，可通过控制按钮控制滚动方向，单击小图片后，在当前页无刷新显示出放大图片，结合LightBox可实现 渐变动画效果的图片放大效果，代码中引入了jquery，且代码中运用有HTML5/CSS3技术，历此测试请在火狐或Chrome下进行。
相片盒
02-15
相片盒
Flex弹性盒模型常用代码
kevin661996的博客
08-30 508
Flex弹性盒模型 给谁添加display:flex 谁就是容器（功能使所有子元素在一行显示） 它的子元素就位项目 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 设置主轴方向 默认值 从左到右依次摆放 flex-direction: row; ...
CSS3盒子模型（FLex弹性布局）实例代码全公开
qq_35658349的博客
08-25 3827
前言 CSS3中的盒子模型（Flex弹性布局），是目前最流行的布局方式，相比于传统的Position，FLoat，Table 布局，盒子模型可以用更少的代码，实现更好的效果（比如：各种居中、对齐等）。 本文将把盒子模型中的各种布局方式，全面展示出来，并且直接提供相关代码，供读者使用。 GitHub项目地址：https://github.com/jiangjiaheng/CSS 项目展示 1. 盒...
图解css3弹性布局/弹性盒子/Flex Box
热门推荐
GengMS的博客
07-24 2万+
css3弹性布局，弹性盒子知识点详解 文章目录css3弹性布局，弹性盒子知识点详解1.flex-direction2.justify-content3.align-items4.flex-wrap5.align-content6.align-self 弹性盒子是 CSS3 的一种新的布局模式。 废话不多哔哔，直接上干货 HTML代码 <div> <div > 1. <img src="https://csdnimg.cn/cdn/content-toolb
图解CSS3弹性盒子属性
通俗易懂
04-17 6965
弹性盒子属性 设置弹性盒子：display flex：块级的弹性盒子 inline-flex：行级的弹性盒子 -webkit-flex：苹果和谷歌的兼容性 搞清楚子元素和父元素 设置在父元素上的值 flex-direction：子元素在父容器中的位置（默认row） row：横向从左到右排列(左对齐)，默认排列 row-reverse：横向右对齐元素反转 column：纵向排列 column...
弹性盒子使用技巧
Ewet
11-24 1528
兼容性：ie11+；Webkit 内核的浏览器，必须加上-webkit-前缀。 注：     设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。     弹性盒子里面的子元素(div)都是iline-flex行内弹性布局 常用属性： 1.flex-direction 属性指定了弹性子元素在父容器中的位置。 flex-direction:...
弹性盒子布局宽度自适应-图片自适应
weixin_46078934的博客
02-09 1336
vue中弹性盒子布局宽度自适应-图片自适应
html弹性盒子代码
03-24
以下是一个简单的HTML弹性盒子代码示例： ```html <div class="item">Item 1 <div class="item">Item 2 <div class="item">Item 3 ``` 在上面的代码中，我们有一个包含三个子元素的容器（`.container`），每...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值