CSS3弹性【flex】 布局的属性详解

最新推荐文章于 2023-08-29 21:00:00 发布
最新推荐文章于 2023-08-29 21:00:00 发布
阅读量772 收藏 2
点赞数
分类专栏： 笔记 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coder_xiaoxu/article/details/111183218
版权

基础HTML结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex 属性详解</title>
		<style type="text/css">
			.box{
				/*  弹性容器的宽高 */
				width: 1000px;
				height: 600px;
				background-color: pink;
				margin: 0 auto;
			}
			.box div{
				/* 弹性元素的宽高 */
				width: 100px;
				height: 80px;
			}
			.one{
				background-color: #008000;
			}
			.two{
				background-color: #FFA500;
			}
			.three{
				background-color: #FF1493;
			}
			.four{
				background-color: #FF0000;
			}
			.five{
				background-color: #ADFF2F;
			}
			.six{
				background-color: #87CEEB;
			}
			.seven{
				background-color: #800080;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">1</div>
			<div class="two">2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div class="five">5</div>
			<div class="six">6</div>
			<div class="seven">7</div>
		</div>
	</body>
</html>

在这里插入图片描述

弹性盒子【弹性空间】 和 弹性元素

条件：开启弹性布局的范围只能是父子元素关系

开启弹性容器属性：

display: flex;

特点：
（1） 开启弹性容器属性的元素，自身会成为弹性容器，其子元素会默认成为弹性元素，并且自身会具有块级显示模式。
在这里插入图片描述
（2） 改变子元素的元素显示模式

（3）子元素不再遵循标准流

在这里插入图片描述

在这里插入图片描述

弹性元素【开启弹性容器属性的子元素】：

在这里插入图片描述

弹性布局的主轴和辅轴概念：

主轴：规定弹性元素排列的方向的轴
辅轴：垂直于主轴方向的轴
在这里插入图片描述

弹性容器的属性

/* 开启弹性容器属性 */
				display: flex; 
				/* 主轴的方向 */
				flex-direction: ;
				/* 弹性元素是否换行 */
				flex-wrap: ;
				/* 弹性元素的辅轴对齐方式 */
				align-items: ;
				/* 弹性元素主轴的空白区域分配 */
				justify-content: ;
				/* 弹性元素辅轴空白区域的分配 */
				align-content: ;

flex-direction 属性【规定主轴方向】
在这里插入图片描述
(1) flex-direction: column 值：

在这里插入图片描述
(2) flex-direction:column-reverse 值：

在这里插入图片描述
（3）flex-direction:row 值【默认值】

在这里插入图片描述
（4）flex-direction:row-reverse 值
在这里插入图片描述

弹性元素会按照主轴的起始位置及方向依次排列

flex-wrap 属性【规定弹性元素是否换行】

主轴为水平方向且为row

（1）flex-wrap: nowrap;【默认值】
主轴为水平方向

特点：
在不设置去除弹性元素的收缩属性值时，当主轴为水平方向时，弹性容器不能放下所有的弹性元素则会通过压缩弹性元素的宽度来实现保持在一行。只到弹性元素不能再收缩为止。

（2）flex-wrap: wrap；

在这里插入图片描述

特点：
（1）弹性元素自动换行
（2）换行的方向按照辅轴的方向依次进行
（3）会根据弹性元素所需的换行数量来自动均分弹性盒子的高度，形成相对应的隔离空间。并将每个隔离空间按照上、中、下三部分均。并且默认弹性元素按隔离空间的顶部对齐。【可以通过 algin-items 属性来改变位置】

主轴为水平方向且为:row-reverse

在这里插入图片描述

主轴为垂直方向且为：column
（1）flex-wrap: nowrap;【默认值】

在这里插入图片描述
（2）flex-wrap: wrap；

在这里插入图片描述

主轴为垂直方向且为：column-reverse

在这里插入图片描述
align-items: 属性【弹性元素辅助轴的对齐方式】

在这里插入图片描述
（1）align-items: center;
情况一
条件：（1）不换行 （2）弹性元素设置宽高（3）主轴方向为 row
在这里插入图片描述
情况二
条件：（1）换行 （2）弹性元素设置宽高（3）主轴方向为 row
在这里插入图片描述
（2）align-items: flex-start;
情况一
条件：（1）不换行 （2）弹性元素设置宽高（3）主轴方向为 row
在这里插入图片描述
情况二
条件：（1）换行 （2）弹性元素设置宽高（3）主轴方向为 row
在这里插入图片描述
(3) align-items: flex-end;
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
主轴为垂直方向时的情况
在这里插入图片描述
在这里插入图片描述
其余情况依次类推

align-items:stretch;【默认属性】

情况1：
（1）不换行 （2）弹性元素不设置高度时
（3）主轴为row
在这里插入图片描述
情况二：
（1）换行 （2）弹性元素不设置高度
（3）主轴为row
在这里插入图片描述
情况三：
（1）不换行 （2）弹性元素无固定宽度（3）主轴为column
在这里插入图片描述
情况四：
（1）换行 （2）弹性元素无固定宽度（3）主轴为column
在这里插入图片描述
当主轴为相反方向时，按照情况类似只是方向不同。

align-items的center属性对当前行起作用，当换行的时候需要使用align-content进行调节

align-content：弹性元素辅轴空白区域的分配

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

align-content的属性只有在大于等于两行的时候才有效
同时设置align-items 和 align-content 时 align-content属性优先起作用

justify-content 【弹性元素辅轴空白区域的分配】

居弹性盒子开始(默认值)： flex-start
在弹性盒子居中：center
居弹性盒子结束 ： flex-end
空间包含元素： space-around
元素包含空间： space-between
空间包含元素(元素之间是相等的间距)： space-evenly

（1）justify-content：center

在这里插入图片描述
（2）justify-content：flex-start

在这里插入图片描述
（3）justify-content:flex-end

在这里插入图片描述
（4）justify-content:space-between

在这里插入图片描述
（5）justify-content:space-around【每个小块均等的间距】

在这里插入图片描述
（3）justify-content:space-evenly

在这里插入图片描述

改变轴的方向触类旁通

弹性元素的属性【设置在某个弹性元素上】

				/* 弹性元素的伸展系数 */
				flex-grow: ;
				/* 弹性元素的收缩系数 */
				flex-shrink: ;
				/* 设置弹性元素个体的位置 */
				align-self: ;
				/* 弹性元素的顺序 */
				order: ;

（1）flex-grow[值为int型，默认为0]

在这里插入图片描述

将其弹性盒子的主轴长度一共分为 1+2+3+4+5+6+7 = 28份
1000/28 = 35.71
其中按照对应的比例，乘以35.71就是伸缩的长度
例如：flex-grow:3; 盒子的伸展长度为 3*35.71
利用此属性可以均等的分配弹性元素
若为负值则失去次属性特征

（2）flex-shrink[值为int型，默认为1]

必须结合不换行使用，且弹性元盒子不下弹性元素

flex-shrink：0；
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

将超出的部分按照弹性元素设置了flex-shrink的值的总和进行均分，并将设置了shrink的弹性元素会在原有的宽度或高度进行减去所占的比例。

例如：
上述例子上超出部分为160px，只有1号盒子设置了10，其余盒子无设置shrink属性值，所以总和为10。
即：
160/10 = 16px，
即： 1号盒子现有宽度为：100-16*10= -60px
由于小于盒子内部元素撑开的元素所以只能缩小到跟内部元素一样宽。

(3)order 属性

在这里插入图片描述
（4）align-self 属性

在这里插入图片描述
在这里插入图片描述

该属性是设置单独的弹性元素的位置，所在位置为 align-items 参考的 上 中 下 模式

凌晨两点的月亮
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 Flex 弹性布局实例代码详解
01-19
//注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、容器属性 1. flex-direction flex-direction 决定项目的排列方向   .box { flex-direction: row | row-reverse | column | ...
css flex 弹性布局详解
09-24
在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性以及子元素的布局。 首先，要启用Flex布局，你需要将父容器的`display`属性设置为`-webkit-flex`或`flex`。在给出的案例中，`.box`类的样式...
CSS 浅探flex布局中使用的overflow ，及width/height=0
japlus的博客
11-27 9228
w3school定义是： overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 对于overflow:auto的初级理解是，设置父元素height/width，若子元素溢出，则自动显示纵向/横向滚动条。 .........
flex布局
LC
03-15 281
flex布局 flex：主轴和辅轴 主轴：确认排列的方向（默认水平排列） 辅助：与主轴垂直的方向成为辅轴 示例 flex布局 <ul> <li>home</li> <li>movie</li> <li>star</li> </ul> <style> ul{ l...
子元素浮动，父元素高度为0解决方法
sd2131512的专栏
01-12 2353
在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：。 例如： Some Content 此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。 若将代码修改为： Some Content 注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，
CSS 弹性布局（flex）的height计算
我有一个魔盒的博客
11-08 2840
弹性布局父元素的height=所有子元素的元素高度，而子元素又能继承父元素高度（height:100%）。
css利用flex分配剩余高度出现子组件溢出问题
最新发布
HDdgut的博客
08-29 2676
是一个CSS属性，用于指定弹性容器内弹性项目的伸缩能力和分配比例。情景：父组件高度一定，子组件中，其他子组件高度固定，一个子组件高度不确定（页面滚动列表）多重嵌套的时候，父组件中也有flex:1，同样需要使用overflow属性控制溢出；当子组件的内容超出了容器的高度(父组件)时候，（推荐），或是限制子组件的最大高度。1.利用flex分配剩余高度/宽度。
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
【Css\flex】css中关于弹性布局flex的综合用法（示例展示）
【敦厚的曹操】的专栏
01-09 1806
一、简单的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"> .
flex布局后，子元素高度如何保持自身高度
qq_37332077的博客
04-22 4859
以下为不设置任何css情况下，正常流布局。图片和文字属于行内元素，图文环绕展示。 需求：图片和文字单独各一列，且各自显示正常的自身高度 **解决办法：**设置容器p的布局为flex布局，display：flex。此时flex布局内的子元素会默认水平显示。 出现新问题，子元素里的图片高度不对了，取的是父容器p里子元素的最大高度，原因是： 这是因为Flex 布局会默认： ● 把所有子项变成水平排列。 ● 默认不自动换行。 ● 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。 这样设置背景色的时候非常
CSS-flex布局详细讲解：
weixin_45718431的博客
03-26 4303
CSS-flex布局详细及其flex布局携程网移动端案列
CSS之经典flex布局——头部底部固定，中间部分自适应高度
bossxu_的博客
07-20 3465
1.外部盒模型 flex ，子元素竖向排列；给顶部和底部元素 固定高度；中间元素 flex-grow: 1; 2.中间元素左右固定,中间自适应；左右元素固定宽度；中间元素flex:1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 经典布局</title> <style> html
【css】div盒子height:100%高度无效解决办法
hzxOnlineOk的博客
11-24 5255
需要分成2种情况来看待，flex情况下，非flex情况下
弹性布局部分
m0_57549307的博客
11-04 234
* 子元素拉伸高度以适应父级标签的高度 注意子元素默认没有设置高度才有效果 *//* 默认情况下 水平是主轴方向 垂直是交叉轴方向 *//* 给容器盒子/父级标签设置弹性盒子属性 *//* 子元素交叉轴/垂直方向 上对齐 *//* 交叉轴 结束方向反转为上方向 *//* 设置子元素换行/多行排列 *//* 多行垂直方向/交叉轴排列 *//* 交叉轴多行排列方向 相反 *//* 父级标签设置弹性属性 *//* 父级标签设置弹性属性 *//* 多行水平方向排列方式 *//* 父级标签设置弹性属性 */
flex常用属性详解
qq_38868959的博客
03-21 1679
flex常用属性详解
CSS 实现高度自适应铺满整屏（包含使用flex布局实现垂直居中）
MyBlog
07-30 9865
在自己写demo的过程中，想使用display:flex实现垂直居中，代码如下： <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ width: 600px; height:
【HTML+CSS】之CSS布局
qq_37086980的博客
08-06 391
常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
CSS3 Flexbox轻松实现元素的水平居中和垂直居中
Just Code
10-15 1455
网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。   元素居中，相信作为前端工程师的你肯定会经常用到，不管是在水平方向居中，还是垂直方向居中，都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中，还是...
CSS3弹性布局详解：flex使用指南
在CSS3中，flex布局是一种强大的工具，用于创建响应式和动态的网页布局。它允许开发者更灵活地控制元素的排列、大小和顺序，尤其是在不同屏幕尺寸下。这个布局模式是通过`display`属性引入的，当设置为`flex`时，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值