精华内容
下载资源
问答
  • 2021-09-21 18:26:02

    本节目标

    1. 掌握flex-grow的使用。
    2. 掌握flex-grow放大的计算公式(难点)。
    3. 掌握编写导航条的技巧。

    内容摘要

    本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器的剩余空间。

    阅读时间约10~15分钟,文字虽多,但主要都是例子。

    flex-grow基础

    flex-grow 属性定义项目的扩大系数,用于分配容器的剩余空间,那么什么是剩余空间呢?

    其实非常简单,剩余空间计算方式就是:

    容器大小 减去 所有项目的总大小
    

    参考如下示例:
    在这里插入图片描述
    其中:

    1. 每个项目的宽度为50px,3个为150px。
    2. 剩余空间为 450px - 150px = 300px。
    

    语法格式:

    .item {
    	/* >=0 的数,默认值为 0 */
    	flex-grow: <number>; 
    }
    

    其中:

    1. 默认为 0 ,即如果容器存在剩余空间,也不放大。
    2. flex-grow只能为>=0的数字,项目根据设置的系数进行放大。
    

    那么问题就来了:

    项目是如何根据设置的系数分配剩余空间呢?
    

    这边涉及到两个关键公式:

    1)计算将多少剩余空间拿来分配。

    公式:剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 。
    

    这边用了一个三元表达式,理解不难,公式的意思就是说:

    如果 所有项目的flex-grow之和 大于等于1,那么就是所有的剩余空间都拿来分配,否则乘以系数即为要分配的剩余空间。

    2)计算每个项目分配到多少剩余空间。

    公式:要分配的剩余空间 * ( 单个项目flex-grow / 所有项目的flex-grow之和 )
    

    简单的说,就是按照 flex-grow 占比进行分配。

    下面我们结合例子进行说明,对这边的计算公式进行理解。

    示例1,设置项目的flex-grow为1:

    接上一篇例子,有一个div(容器,450px),容器内包含3个div(项目,各50px)。

    .item {
    	/* 	flex-basis属性定义了项目占据主轴空间(main size)大小。 */
    	/* 	这边设置为50px */
    	flex-basis: 50px;
    	
    	/* flex-grow 属性定义项目的扩大系数 */
    	/* 这边设置为1 */
    	flex-grow: 1;
    }
    

    运行效果:
    在这里插入图片描述
    我们观察到3个项目的宽度都变成了150px,可以看到项目被进行了扩大。

    现在套公式看下情况:

    1)计算总共要分配多少剩余空间。

    要分配的剩余空间
     = 剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 
     = 300px * (3 >= 1 ? 1 : 3)
     = 300px * 1
     = 300px
    

    2)计算每个项目分配到多少剩余空间。

    因为每个项目flex-grow都为1,所以每个项目分配的剩余空间都一样。

    每个项目分配的剩余空间
     = 要分配的剩余空间 * ( 单个项目flex-grow / 所有项目的flex-grow之和 )
     = 300px * ( 1 / 3)
     = 100px
    

    每个项目多分配100px,加上自身设置的flex-basis,最终每个项目宽度就为150px了。

    示例2,设置项目1的flex-grow为1,项目2的flex-grow为2,项目3的flex-grow为3:

    我们直接套公式计算:

    1)计算总共要分配多少剩余空间。

    要分配的剩余空间
     = 剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 
     = 300px * (6 >= 1 ? 1 : 6)
     = 300px * 1
     = 300px
    

    2)计算每个项目分配到多少剩余空间。

    因为每个项目flex-grow都不一样,所以每个项目分配的剩余空间要分开计算。

    项目1分配的剩余空间
     = 要分配的剩余空间 * ( 项目1flex-grow / 所有项目的flex-grow之和 )
     = 300px * ( 1 / 6)
     = 50px
    
    项目2分配的剩余空间
     = 要分配的剩余空间 * ( 项目2flex-grow / 所有项目的flex-grow之和 )
     = 300px * ( 2 / 6)
     = 100px
    
    项目3分配的剩余空间
     = 要分配的剩余空间 * ( 项目3flex-grow / 所有项目的flex-grow之和 )
     = 300px * ( 3 / 6)
     = 150px 
    

    所以最终:项目1宽为100px、项目2宽为150px、项目3宽为200px。

    写上代码看看效果:

    .item {
    	/* 	flex-basis属性定义了项目占据主轴空间(main size)大小。 */
    	/* 	这边设置为50px */
    	flex-basis: 50px;
    }
    .item1 {
    	flex-grow: 1;
    }
    
    .item2 {
    	flex-grow: 2;
    }
    
    .item3 {
    	flex-grow: 3;
    }
    

    运行效果:
    在这里插入图片描述
    观察运行效果,符合预期。

    示例3:设置项目1的 flex-grow 为 0.1,项目2的 flex-grow 为0.2,项目3的 flex-grow 为 0.3:

    这个示例和上例差不多,只是数字变成了小数,并且总和不大于1。

    先套公式来计算一下:

    1)计算总共要分配多少剩余空间。

    要分配的剩余空间
     = 剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 
     = 300px * (0.6 >= 1 ? 1 : 0.6)
     = 300px * 0.6
     = 180px
    

    2)计算每个项目分配到多少剩余空间。

    因为每个项目flex-grow都不一样,所以每个项目分配的剩余空间要分开计算。

    项目1分配的剩余空间
     = 要分配的剩余空间 * ( 项目1flex-grow / 所有项目的flex-grow之和 )
     = 180px * ( 0.1 / 0.6)
     = 30px
    
    项目2分配的剩余空间
     = 要分配的剩余空间 * ( 项目2flex-grow / 所有项目的flex-grow之和 )
     = 180px * ( 0.2 / 0.6)
     = 60px
    
    项目3分配的剩余空间
     = 要分配的剩余空间 * ( 项目3flex-grow / 所有项目的flex-grow之和 )
     = 180px * ( 0.3 / 0.6)
     = 90px
    

    所以最终:项目1宽为80px、项目2宽为110px、项目3宽为140px。

    样式代码如下:

    .item {
    	/* flex-basis属性定义了项目占据主轴空间(main size)大小。 */
    	flex-basis: 50px;
    }
    
    .item1 {
    	/* flex-grow属性定义项目的放大比例 */
    	flex-grow: 0.1;
    }
    
    .item2 {
    	/* flex-grow属性定义项目的放大比例 */
    	flex-grow: 0.2;
    }
    
    .item3 {
    	/* flex-grow属性定义项目的放大比例 */
    	flex-grow: 0.3;
    }
    

    运行效果如下:
    在这里插入图片描述
    符合计算预期。

    flow-grow应用

    flow-grow属性在项目中运用很多,比如页面布局、导航条、分页等。

    实例1:使用 flex 弹性布局实现如下效果:
    在这里插入图片描述
    这个其实就是腾讯首页的导航条了,我们模拟实现一下,步骤分为4步:

    1)首先先写html标签,标签很简单一个 nav 包含若干 a 标签:

    <nav class="container">
    	<a class="item" href="#">新闻</a>
    	<a class="item" href="#">视频</a>
    	<a class="item" href="#">图片</a>
    	<a class="item" href="#">军事</a>
    	<a class="item" href="#">体育</a>
    	<a class="item" href="#">NBA</a>
    	<a class="item" href="#">娱乐</a>
    	<a class="item" href="#">财经</a>
    	<a class="item" href="#">科技</a>
    </nav>
    

    2)设置基本样式,背景、颜色、边框圆角等:

    .container {
    	height: 44px;
    	background-color: #1479d7;
    	border-radius: 3px;
    }
    
    .item {
    	color: white;
    	text-align: center;
    	text-decoration: none;
    }
    

    运行效果:
    在这里插入图片描述
    3)设置容器为 flex 布局,项目 flex-grow 为1 平分剩余空间:

    .container {
    	/* 设置子元素的布局为flex布局 */
    	display: flex;
    }
    
    .item {
    	/* 设置项目放大系数 */
    	flex-grow: 1;
    }
    

    运行效果:
    在这里插入图片描述
    4)再来一个上下居中即可,flex 弹性布局将容器属性 align-items 设置为 center 即可:

    .container {
    	/* 设置交叉轴上项目居中排列 */
    	align-items: center;
    }
    

    运行效果:
    在这里插入图片描述
    至此这个例子就完成了。

    和之前使用float相比,我们尝试改变容器大小,会发现项目也跟着变化,这个就是弹性的意思了。如下图所示:
    在这里插入图片描述

    本节总结

    1. 容器内未被占用的空间称为剩余空间。

    2. flex-grow用于设置项目的放大系数。

    3. 项目放大尺寸计算包含两个公式:

    1)计算将多少剩余空间拿来分配。

    公式:剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 。
    

    2)计算每个项目分配到多少剩余空间。

    公式:要分配的剩余空间 * ( 单个项目flex-grow / 所有项目的flex-grow之和 )
    
    1. flex-grow不是设置具体的尺寸,在弹性布局中应用广泛。
    更多相关内容
  • flex.css 轻松使用CSS3 Flexbox 用法 flex-row和flex-col 添加flex-row或flex-col以将元素样式设置为具有Flex方向行或列的Flex框。 或者,您可以将flex-box与flex-row一样使用,其高度和宽度为100%。 要包装孩子...
  • 一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志:display: flexbox; or the flex() function or flex-pack property 2012 version 标志:...
  • 一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反)  ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-...
  • Flex布局简介 Flex英文为flexiable box,翻译为弹性盒子,Flex布局即弹性布局。 Flex布局为盒子模型提供了很大的灵活性,任何一个容器都可以指定为Flex布局,设置方法为: .box{ display: flex; } 行内元素使用...
  • flex 一个自动的词法分析器生成器,通常与bison一起使用,基本上与yacc兼容。 本文档为flex manual,是学习flex不可多得的学习资料。
  • flex类名组合样式.css

    2020-12-03 15:29:36
    flex的属性的整理,可以直接使用类名进行组合实现flex布局。项目的属性,order,flex-grow,flex-shrink,flex-basis,flex.需要在项目中添加对应的样式
  • flex布局实现顶部导航,底部导航固定,内容区内容高度超过可展示区域时出现滚动条,内容高度不足时铺满屏幕。
  • Flex无限帐号

    2018-09-10 23:48:26
    Flex无限帐号 最新Flex3会员永久使用!无限下载补丁!不怕被封,随意登陆!只要好用点个赞。分享! 实现无限下载补丁,解决一天 安装两个的烦恼!
  • 22中,您需要将以下代码段添加到您设置的display: flex每个元素中display: flex 。 /* * Legacy Firefox implementation treats all flex containers * as inline-block elements. */ @-moz-document url-...
  • FlexCAN详解

    2018-05-12 16:53:38
    FlexCAN模块知识详解,更加清楚了解FlexCAN模块的相关知识。
  • 本文主要介绍了详解css3 flex弹性盒自动铺满写法,分享给大家,具体如下:
  • linux下flex的deb包

    2018-10-30 10:19:42
    flex_2.5.35-10ubuntu3_i386.deb libfl-dev_2.5.35-10ubuntu3_i386.deb linux下32位的deb安装包,亲测Ubuntu12.04可以安装
  • FlexBox-flex-direction:flex,inline-flex。 弹性方向
  • 编译器
  • flex-2.6.4.tar.gz

    2017-08-12 21:07:00
    flex-2.6.4.tar.gz
  • flex布局详解

    千次阅读 2021-11-16 16:24:42
    目录说明display属性flex-direction属性主轴与交叉轴justify-content属性align-items属性flex-wrap属性flex-flow属性align-content属性align-self属性order属性flex-grow属性flex-shrink属性flex-basis属性flex属性...

    说明

    后面的flex布局示例代码都会在此示例的flexTest样式上增加代码以做说明。

    <!DOCTYPE html>
    <html>
    <head>
    	<style>		
    		.box{
    			height:500px;
    			width:700px;
    			border: 1px solid gray;
    		}
    		
    		.number{
    			width:40px;
    			text-align: center;
    		}
    		.number1{
    			background-color: #009688;
    			height:40px;
    		}
    		.number2{
    			background-color: #eb064a;
    			height:50px;
    		}
    		.number3{
    			background-color: #9c27b0;
    			height:60px;
    		}
    		.number4{
    			background-color: #ebea06;
    			height:70px;
    		}
    		.number5{
    			background-color: #1cdd30;
    			height:80px;
    		}
            .flexTest{
                height:500px;
            }
    	</style>
    </head>
    
    <body>
    <div class="box">
    	<div class="flexTest">
    			<div class="number number1">1</div>
    			<div class="number number2">2</div>
    			<div class="number number3">3</div>
    			<div class="number number4">4</div>
    			<div class="number number5">5</div>
    	</div>
    </div>
    </body>
    </html>
    

    效果如下:
    在这里插入图片描述

    display属性

    设置 display: flex; 表示启用flex布局,只有启用了flex布局后续的其他flex属性才会生效,启用flex布局后里面的元素默认水平排列。

    代码:

    .flexTest{
    	height:500px;
    	display: flex;
    }
    

    在这里插入图片描述

    flex-direction属性

    flex-direction属性可取以下值:row(默认) 、row-reverse、column、column-reverse

    说明:

    row 横向从左往右排列,即项目排列顺序为正序1-2-3-4-5。row为默认值,即当启用flex布局后即使不设置flex-direction,flex-direction会默认为row

    row-reverse 同为横向排列,但从右往左排列,即顺序为倒序5-4-3-2-1

    column 为纵向从上往下排列,项目排列顺序为正序1-2-3-4-5

    column-reverse 同为纵向排列,,但从下往上排列,即项目顺序为倒序5-4-3-2-1

    以row-reverse为例:

    		.flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row-reverse;
    		}
    

    在这里插入图片描述

    主轴与交叉轴

    主轴和交叉轴的概念:

    flex-direction设置为横向(row或row-reverse),则主轴为横向,交叉轴为纵向;

    flex-direction设置为纵向(column或column-reverse),则主轴为纵向,交叉轴为横向;

    (主轴和交叉轴,用于水平对齐和纵向两个对齐)

    justify-content属性

    justify-content属性控制主轴上的对齐方式

    justify-content属性可取以下值:flex-start(默认) 、flex-end 、 center、 space-between 、space-around 、space-evenly;

    说明:

    flex-start:各元素在主轴上从起始处排列对齐。

    flex-end:各元素在主轴上从结束处排列对齐。

    center:各元素在主轴上居中对齐

    space-between:第一元素在主轴上起始,最后一个元素在主轴上结束位置,其余元素项目评分中间空间

    space-around:与space-between相似。区别是space-around属性的第一个元素之前和最后一个元素之后会有空白间隙,间隙等于每对相邻元素之间空间的一半。

    space-evenly:与space-around相似。区别是space-evenly属性的所有元素之间的间隙是相等的。

    .flexTest{
    	height:500px;
    	display: flex;
    	flex-direction: row;
    	justify-content:space-around;
    }
    

    在这里插入图片描述

    align-items属性

    align-items属性控制交叉轴上的对齐方式

    align-items属性可取以下值:flex-start、 flex-end、center、baseline、stretch(默认)

    说明:

    flex-start、 flex-end、center是控制交叉轴上的对齐方式,对齐方式与上面justify-content里的同理。

    baseline:元素以第一行文字的基线为参照进行排列。

    stretch:align-items属性的默认值,如果元素未设置高度或设为auto,将占满整个容器的高度。(示例中每个数字所在的div都设置了高度,所以align-items设置为stretch不会占满)

    		.flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			justify-content:space-around ;
    			align-items:center;
    		}
    

    flex-wrap属性

    flex-wrap属性控制主轴上的元素满了后的换行(换列)方式

    flex-wrap属性可取以下值:nowrap(默认) 、wrap 、 wrap-reverse

    说明:

    nowrap:默认值,主轴元素满了后不换行(不换列)

    wrap:主轴元素满了后换行(换列)

    wrap-reverse:主轴元素满了后换行(换列),换行后的行(列)在前

    在原来的代码中,我们再增加14个数字5分别查看nowrap、wrap 、 wrap-reverse的效果。

    nowrap:

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			justify-content:space-around ;
    			align-items:flex-start;
    			flex-wrap:nowrap;
    		}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK3Pd0Yt-1637051055438)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116143500278.png)]

    wrap :

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			justify-content:space-around ;
    			align-items:flex-start;
    			flex-wrap:wrap;
    		}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8gLRdKQ-1637051055440)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116143522962.png)]

    wrap-reverse:

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			justify-content:space-around ;
    			align-items:flex-start;
    			flex-wrap:wrap-reverse;
    		}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtHlc940-1637051055442)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116143557641.png)]

    flex-flow属性

    flex-flow属性是flex-direction和flex-wrap的合写形式,第一个值代表flex-direction,第二个值代表flex-wrap

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			flex-wrap:wrap;
    			justify-content:space-around ;
    		}
    

    相当于

    		.flexTest{
    			height:500px;
    			display: flex;
    			flex-flow:row wrap;
    			justify-content:space-around ;
    		}
    

    align-content属性

    align-content属性控制交叉轴上的多行(多列)对齐方式。如果只有行(列),该属性不起作用。

    align-content属性可取以下值:flex-start、 flex-end、 center、 space-between、 space-around、 stretch(默认);

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			justify-content:space-around ;
    			align-items:flex-start;
    			flex-wrap:wrap;
    			align-content:flex-start;
    	}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3RD5izb-1637051055443)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116144828361.png)]

    align-self属性

    align-self属性用于具体元素交叉轴上的对齐方式

    align-self属性可取以下值:auto(默认)、flex-start、flex-end、 center、baseline、stretch

    说明:

    auto:表示继承父容器的align-items属性。如果没父元素,则默认stretch。

    对数字5单独进行交叉轴上对齐:

    .number5{
    		background-color: #1cdd30;
    		height:80px;
    		align-self:flex-end;
    }
    .flexTest{
    		height:500px;
    		display: flex;
    		flex-direction: row;
    		justify-content:space-around ;
    		align-items:flex-start;
    }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RE6yluKD-1637051055444)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116151254744.png)]

    order属性

    order属性定义在具体元素上,用于排列顺序。数值越小,排列越靠前,默认为0。

    .number3{
    		background-color: #9c27b0;
    		height:60px;
    		order:4;
    }
    .number4{
    		background-color: #ebea06;
    		height:70px;
    		order:3;
    }
    .number5{
    		background-color: #1cdd30;
    		height:80px;
    		order:1;
    }
    

    因为数字1、2默认为order为0,数字3 order设为了4,数字4 order设为了3,数字3 order设为了1。因为order越小优先级越靠前,所以排列结果如下

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zNMJFeoK-1637051055445)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116150226387.png)]

    flex-grow属性

    flex-grow属性定义元素的放大比例,默认为0(即如果存在剩余空间,也不放大),负数无效。

    注意,即便设置了固定宽度,设置flex-grow大于0后,也会放大。

    如果所有元素的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个元素的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他元素多一倍。

    		.number5{
    			background-color: #1cdd30;
    			height:80px;
    			flex-grow:1;	
    		}
    		
    		.flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			justify-content:space-around ;
    			align-items:flex-start;
    		}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5IeGc5rx-1637051055446)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116152633908.png)]

    flex-shrink属性

    flex-shrink 属性定义项目的收缩比例,默认为1。即如果主轴满了的话会收缩。当存在剩余空间,不会收缩。负值对该属性无效。
    flex-shrink属性为0,表示该元素不收缩。
    flex-shrink属性越大,元素收缩越多。

    flex-basis属性

    flex-basis 属性定义项目的宽度,相当于width。默认为auto。

    如果同时设置了width和flex-basis,flex-basis权重会比width属性高,因此会覆盖widtn属性。

    		.number5{
    			background-color: #1cdd30;
    			height:80px;
    			flex-basis:100px;
    		}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8mLmOTd-1637051055447)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116153752759.png)]

    flex属性

    flex属性是用于flex-grow、flex-shrink、flex-basis属性的合并写法

    例如:

    .number5{
    			background-color: #1cdd30;
    			height:80px;
    			flex-grow:1;
    			flex-shrink:1;
    			flex-basis:auto;
    		}
    

    相当于

    .number5{
    			background-color: #1cdd30;
    			height:80px;
    			flex:1 1 auto;
    		}
    

    该属性有两个快捷值:flex:auto;相当于(1 1 auto) 和 flex:none;相当于(0 0 auto)。
    建议优先使用auto属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

    row-gap与column-gap属性

    row-gap和column-gap属性用于设置横向与纵向各元素间的间隔空间

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			flex-wrap:wrap;
    			justify-content:space-around ;
    			row-gap: 10px;
    			column-gap: 20px;
    		}
    

    gap属性

    gap属性是row-gap和column-gap的合写形式

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			flex-wrap:wrap;
    			justify-content:space-around ;
    			row-gap: 10px;
    			column-gap: 20px;
    		}
    

    相当于

    .flexTest{
    			height:500px;
    			display: flex;
    			flex-direction: row;
    			flex-wrap:wrap;
    			justify-content:space-around ;
    			gap: 10px 20px;
    		}
    

    其他示例

    .number4{
    		background-color: #ebea06;
    		height:70px;
    		margin-left:auto
    	}
    .flexTest{
    		height:500px;
    		display: flex;
    		flex-direction: row;
    		flex-wrap:wrap;
    		justify-content:space-start ;
    	}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFCES3pO-1637051055449)(C:\Users\kingdee\AppData\Roaming\Typora\typora-user-images\image-20211116162329152.png)]

    参考:
    Basic concepts of flexbox
    Aligning Items in a Flex Container
    Flex 布局教程:语法篇
    A Complete Guide to Flexbox
    一篇文章弄懂flex布局
    Layout Demos

    展开全文
  • flex-messaging-common.jar,flex-messaging-core.jar,flex-messaging-opt.jar,flex-messaging-proxy.jar,flex-messaging-remoting.jar,flex-rds-server.jar java集成flex需要的JAR包全面jar包
  • 微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
  • flex布局 flex全解 flex

    千次阅读 2021-04-30 19:44:23
    一、Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ ...

    一、Flex布局是什么?

    Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

    任何一个容器都可以指定为Flex布局。

    .box{
      display: flex;
    }
    

    行内元素也可以使用Flex布局。

    .box{
      display: inline-flex;
    }
    

    Webkit内核的浏览器,必须加上-webkit前缀。

    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    

    注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

    二、基本概念

    采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    三、容器的属性

    以下6个属性设置在容器上。

    • flex-direction 决定主轴的方向
    • flex-wrap 控制换行
    • flex-flow flex-flow: <flex-direction> <flex-wrap>;
    • justify-content 主轴上的对齐方式 (横)
    • align-items 项目在交叉轴上如何对齐 (竖)
    • align-content 多根轴线的对齐方式 (如果项目只有一根轴线,该属性不起作用)

    具体如下:

    3.1 flex-direction属性

    flex-direction属性决定主轴的方向(即项目的排列方向)。

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    

    img

    它可能有4个值。

    • row(默认值): 主轴为水平方向,起点在左端。
    • row-reverse: 主轴为水平方向,起点在右端。
    • column: 主轴为垂直方向,起点在上沿。
    • column-reverse: 主轴为垂直方向,起点在下沿。

    3.2 flex-wrap属性

    默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    img

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    

    它可能取三个值。

    (1)nowrap(默认):不换行。

    img

    (2)wrap:换行,第一行在上方。

    img

    (3)wrap-reverse:换行,第一行在下方。

    img

    3.3 flex-flow

    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

    .box {
      flex-flow: <flex-direction> <flex-wrap>;
    }
    

    3.4 justify-content属性

    justify-content属性定义了项目在主轴上的对齐方式。

    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }
    

    img

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    3.5 align-items属性

    align-items属性定义项目在交叉轴上如何对齐。

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    

    img

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    3.6 align-content属性

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    

    img

    该属性可能取6个值。

    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。
    • 四、项目的属性

      以下6个属性设置在项目上。

      • order 项目的排列顺序。数值越小,排列越靠前,默认为0。
      • flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
      • flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
      • flex 是flex-grow, flex-shrink 和 flex-basis的简写
      • align-self 许单个项目有与其他项目不一样的对齐方式
      • flex-basis 具体如下

    具体如下:

    4.1 order属性

    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

    .item {
      order: <integer>;
    }
    

    img

    4.2 flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    .item {
      flex-grow: <number>; /* default 0 */
    }
    

    img

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

    4.3 flex-shrink属性

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

    .item {
      flex-shrink: <number>; /* default 1 */
    }
    

    img

    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    负值对该属性无效。

    4.4 flex-basis属性

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

    .item {
      flex-basis: <length> | auto; /* default auto */
    }
    

    它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

    4.5 flex属性

    flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    

    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

    建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

    4.6 align-self属性

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

    img

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    来源: https://www.runoob.com/w3cnote/flex-grammar.html

    来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    最后

    希望大家及时补充, 咱们可以一起优化把这个知识点 更加通俗的表达.

    展开全文
  • flex布局及flex实现常见的前端布局

    千次阅读 2021-11-21 11:43:30
    文章目录flex布局一、flex容器属性1、flex-direction2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content二、项目属性1、order**2、flex-grow****3、flex-shrink**4、flex-basis5、flex筛子...

    flex布局

    flex布局两个属性,容器和项目。

    一旦我们开启弹性布局后,项目(也就是设为dispaly:flex元素的子元素)即使为块级元素,它的宽度仍不会是父亲的100%,因为flex从字面上理解就是弹性布局吗,所以块级元素的宽度为内容所撑起的宽度。

    早期CSS三大难题包括:垂直居中、列等宽和和自适应宽

    设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

    img

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    任何容器都可以设为flex(或者inline-flex)

    .container {
      display: flex; /* or inline-flex */
    

    容器属性有:

    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
    • align-content

    项目属性有:

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • aligin-self

    一、flex容器属性

    1、flex-direction

    项目的排列方向。默认row,即横向水平向右排列

        .container {
          flex-direction: row | row-reverse | column | column-reverse;
        }
    

    img

    2、flex-wrap

    img

    3、flex-flow

    flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

        .container {
          flex-flow: <flex-direction> || <flex-wrap>;
        }
    
        .container {
          justify-content: flex-start | flex-end | center | space-between | space-around;
        }
    

    4、justify-content

    项目在main-axis上的对齐方式。默认为flex-start。

    img

    1. space-between:

      • flex items 之间的距离相等。
      • 与main start、main end两端对齐。
    2. space envely:

      • flex items 之间的距离相等。
      • flex items(也叫项目)与main start、main end之间的距等于flex items之间距离。
    3. space-around

      • flex items之间的距离相等。
      • flex items(也叫项目)与main start、main end之间的距离是flex items之间距离一半

    5、align-items

    项目在cross-axis(交叉轴)上的对齐方式。默认flex-start

        .container {
          align-items: flex-start | flex-end | center | baseline | stretch  | normal;
        }
    
    1. normal: 在弹性布局中,效果和stretch一样。

    2. stretch:当flex items 在cross axis方向的 size 为 auto 时(即我们没有设置他的高度),会自动拉伸至填充flex contanier

    3. baseline: 与基准线对齐。

    6、align-content

    定义了多行flex itmes 在cross axis 上的对齐方式。如果项目只有一根轴线(即项目只有一行),该属性不起作用。用法与justify-conten类似

        .container {
          align-content: flex-start | flex-end | center | space-between | space-around | stretch;
        }
    
    • flex-start:
      在这里插入图片描述

    • flex- end
      在这里插入图片描述

    • align-content: space-between

    在这里插入图片描述

    二、项目属性

    1、order

    它决定了flex items 的排布顺序,

    • 可以设置为任意整数(正整数,负整数,0),值越小排在前面。
    • 默认值为0.
        .item {
          order: <integer>; /* default 0 */
        }
    

    2、flex-grow

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

        .item {
          flex-grow: <number>; /* default 0 */
        }
    

    3、flex-shrink

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

        .item {
          flex-shrink: <number>; /* default 1 */
        }
    

    4、flex-basis

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

        .item {
          flex-basis: 具体的宽度数值(100px) | auto; /* default auto */
        }
    

    决定flex items 最终 base size的因素,优先级从高到低

    • max-width\max-height\min-width\min-height
    • flex-basis
    • width\height
    • 内容本身的size

    所以如果在项目的属性中,我们同时设置了宽度width和felx-basis这两个属性,那么width属性不生效。

    5、flex

    flex属性是flex-grow, flex-shrinkflex-basis的简写,属性可以指定1个,两个,或者3个值。默认值为flex:initial,即三个值分别为 0 1 0%,也就是说flex-grow, flex-shrink 各自是各自的默认值,而flex-basis0%,也就是初始不占宽度。

    单值语法 :值必须为以下其中之一:

    • 一个无单位的数(number);他会被当做flex-grow的值。
      • 即此时flex-basis的值一直为0%,flex-shrink的值一直为1,flex为数值且改变时候不会改变 flex-basis和flex-shrink的值。
    • 一个有效的宽度(width)值,如100px;它会被当做flex-basis的值。
      • 即此时 flex-grow为 1, flex-basis为 1, flex-basis为 100px(注意flex-grow的值不为默认值 0 )
    • 关键字 0 、none 、auto、1

    flex :initial 适合做小控件的分布布局,默认
    flex:0 不经常用 ,适合替换元素下的文字内容不超过替换元素(设置在替换元素的父元素上)(0 1 0%)
    flex :1 经常用来做等分布局,当希望元素充分利用剩余空间,同时不会侵占元素应有的宽度的时候。(1 1 0%)
    flex: auto 用来做宽度根据内容宽度不均分的标题导航栏 (1 1 auto)
    flex: none 适合用在内容不能换行的小控件身上。如按钮。(0 0 auto)

    • 双值语法:

      • 第一个值必须为一个无单位数,并且它会被当做flex-grow的值。
      • 第二个值必须为以下之一:
        • 一个无单位数:它会被当做flex-shirnk的值。
        • 一个有效的宽度值,它会被当做flex-basis的值。
    • 三值语法:

      • 第一个值必须为一个无单位数,并且它会被当做flex-grow的值。
      • 第二个值必须为一个无单位数,并且它会被当做flex-shirnk的值。
      • 第三个值必须为一个有效的宽度值,并且它会被当做flex-basis的值。
    • 该属性有四个快捷值:auto (1 1 auto)和 1 (1 1 0%) 类似,0 (0 1 0%)none (0 0 auto)类似。

    flex :0 元素不会弹性增大,但是会弹性缩小,且考虑到flex-basis的值为0%,因此设置了flex:0 的元素表现为最小内容宽度。

    flex: none 元素尺寸和flex: 0一样不会自动增大,但是也不会自动缩小。且考虑到此时flex-basis的属性值为 auto,故设置了flex:none 的尺寸的最终尺寸最终表现为最大内容宽度。

    替换元素: 视频图片按钮属于替换元素,替换元素的首选最小宽度是元素内容自身的宽度。
    最终的首选内容宽度: 一个元素最终首选内容宽度是所有内部子元素中最大的那个首选内容宽度。

    flex:initial—— flex:0 1 auto

    flex:initial是flex的默认属性,具体表现为,当容器有剩余空间时不增长,当容器空间不足时会缩小,尺寸自适应内容;

    效果如下所示:
    在这里插入图片描述

    代码如下所示:(下面例子代码类似,只是flex值改变,就不做展示)

    <h4>flex:initial</h4>
    <div class="container">
      <div class="iten">天高地迥</div>
      <div class="iten">觉宇宙之无穷</div>
      <div class="iten">兴尽悲来</div>
      <div class="iten">识盈虚之有数</div>
    </div>
     
    <style>
        .container{
          display: flex;
          border:1px red solid;
          width: 400px;
        }
        .container div{
          border: 1px blue solid;
          flex:initial;
        }
    </style>
    

    flex:0——flex: 0 1 % 与 flex: none —— flex: 0 0 auto

    flex:0与flex:none 两个对应的flex-grow是0,flex-shrink属性前者为1,后者为0,且flex-basis不同;故,flex:0,会表现为“一柱擎天”效果 ,flex:none 具体表现为元素尺寸不会弹性增大,也不会弹性减小

    • flex:0
      • flex-basis:0%表示固定尺寸是0,且元素的flex-basis为 1
    • flex: none
      • flex-basis: auto表示固定尺寸由内容决定,由于元素不具有弹性(不会增大,不会缩小),因此元素内的内容不会换行

    效果图如下所示:

    在这里插入图片描述

    在这里插入图片描述

    flex:1——flex: 1 1 0% 与 flex:auto——flex:1 1 auto

    flex:1与flex:auto 两个对应的flex-grow和flex-shrink属性值都是1,只有flex-basis不同,这两种具体表现形式为,元素尺寸可以弹性增大,也可以弹性减小,在flex:1 时在尺寸不足时会优先最小化尺寸,flex:auto在尺寸不足时优先最大化内容尺寸。
    效果如下所示:

    在这里插入图片描述
    在这里插入图片描述上图体现了两者的区别,虽然都是充分分配容器内容,但是flex:1 的尺寸是较长的尺寸优先牺牲自己的尺寸,而flex:auto 中是较长的尺寸优先扩展自己的尺寸。

    所以,flex:1 更适合在等比例列表时使用,flex:auto适用于元素充分利用剩余空间,比如头部导航文字多少不一致时使用,如下图:

    在这里插入图片描述

    6、align-self

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

    三、筛子布局

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定。
    在这里插入图片描述

    注意哈,Flex布局后,其子元素的floatclearvertical-align属性将失效。

    骰子的一面,最多可以放置9个点。

    在这里插入图片描述

    下面,就来看看Flex如何实现,从1个点到9个点的布局。

    在这里插入图片描述

    单个Flex项
    <body>
        <div class="container box">
            <div class="item"></div>
        </div>
    </body>
    
    body{
        background-color:#333;
    }
    .container{
        background-color:#e7e7e7;
        margin:16px;
        padding:4px;
        width:104px;height: 104px;
        border-radius: 10%;
        box-shadow:inset 0 5px white,
                   inset 0 -5px #bbb,
                   inset 5px 0 #d7d7d7,
                   inset -5px 0 #d7d7d7;
    }
    .item{
        width:24px;height: 24px;
        border-radius: 50%;
        margin:4px;
        background-color: #333;
        box-shadow: inset 0 3px #111,
                    inset 0 -3px #555;
    }
    

    在这里插入图片描述

    两个Flex项
    <body>
        <div class="container box">
            <div class="item">1</div>
            <div class="item">2</div>
        </div>
    </body>
    
    body{
        background-color:#333;
    }
    .container{
        background-color:#e7e7e7;
        margin:16px;
        padding:4px;
        width:104px;height: 104px;
        border-radius: 10%;
        box-shadow:inset 0 5px white,
                   inset 0 -5px #bbb,
                   inset 5px 0 #d7d7d7,
                   inset -5px 0 #d7d7d7;
    }
    .item{
        width:24px;height: 24px;
        border-radius: 50%;
        margin:4px;
        color:white;
        text-align:center;
        background-color: #333;
        box-shadow: inset 0 3px #111,
                    inset 0 -3px #555;
    
    }
    

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    三个Flex项
    <body>
        <div class="container box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
    

    在这里插入图片描述
    在这里插入图片描述##### 四个Flex项

    <body>
        <div class="container box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </body>
    

    在这里插入图片描述

    <body>
        <div class="container box">
            <div class="row">
                <div class="item">1</div>
                <div class="item">2</div>            
            </div>
            <div class="row">
                <div class="item">3</div>
                <div class="item">4</div>            
            </div>
        </div>
    </body>
    

    在这里插入图片描述

    在这里插入图片描述

    六个Flex项
    <body>
        <div class="container box">
            <div class="item">1</div>
            <div class="item">2</div> 
            <div class="item">3</div>   
            <div class="item">4</div>        
            <div class="item">5</div>
            <div class="item">6</div>           
        </div>
    </body>
    

    在这里插入图片描述

    <body>
        <div class="container box">
            <div class="row">
                <div class="item">1</div>
                <div class="item">2</div> 
                <div class="item">3</div>  
            </div>
            <div class="row">
                <div class="item">4</div>     
            </div>
            <div class="row">
                <div class="item">5</div>
                <div class="item">6</div>  
            </div>
        </div>
    </body>
    
    

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

    九个Flex项
    <body>
        <div class="container box">
            <div class="item">1</div>
            <div class="item">2</div> 
            <div class="item">3</div>   
            <div class="item">4</div>        
            <div class="item">5</div>
            <div class="item">6</div>           
            <div class="item">7</div>        
            <div class="item">8</div>
            <div class="item">9</div>    
        </div>
    </body>
    

    在这里插入图片描述

    其余前端布局用flex实现

    1. 网格布局

    1.1 基本网格布局

    最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

    HTML代码如下。

        <div class="Grid">
          <div class="Grid-cell">...</div>
          <div class="Grid-cell">...</div>
          <div class="Grid-cell">...</div>
        </div>
    
    

    CSS代码如下。

        .Grid {
          display: flex;
        }
    
        .Grid-cell {
          flex: 1;
        }
    
    

    在这里插入图片描述

    1.2 百分比布局

    某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

    HTML代码如下。

        <div class="Grid">
          <div class="Grid-cell u-1of4">...</div>
          <div class="Grid-cell">...</div>
          <div class="Grid-cell u-1of3">...</div>
        </div>
    
    
    .Grid {
      display: flex;
    }
    
    .Grid-cell {
      flex: 1;
    }
    
    .Grid-cell.u-full {
      flex: 0 0 100%;
    }
    
    .Grid-cell.u-1of2 {
      flex: 0 0 50%;
    }
    
    .Grid-cell.u-1of3 {
      flex: 0 0 33.3333%;
    }
    
    .Grid-cell.u-1of4 {
      flex: 0 0 25%;
    }
    

    在这里插入图片描述

    2.圣杯布局

    圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

    在这里插入图片描述

    HTML代码如下。

        <body class="HolyGrail">
          <header>...</header>
          <div class="HolyGrail-body">
            <main class="HolyGrail-content">...</main>
            <nav class="HolyGrail-nav">...</nav>
            <aside class="HolyGrail-ads">...</aside>
          </div>
          <footer>...</footer>
        </body>
    
    

    CSS代码如下。

    .HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    header,
    footer {
      flex: 1;
    }
    
    .HolyGrail-body {
      display: flex;
      flex: 1;
    }
    
    .HolyGrail-content {
      flex: 1;
    }
    
    .HolyGrail-nav, .HolyGrail-ads {
      /* 两个边栏的宽度设为12em */
      flex: 0 0 12em;
    }
    
    .HolyGrail-nav {
      /* 导航放到最左边 */
      order: -1;
    }
    

    如果是小屏幕,躯干的三栏自动变为垂直叠加。

    @media (max-width: 768px) {
      .HolyGrail-body {
        flex-direction: column;
        flex: 1;
      }
      .HolyGrail-nav,
      .HolyGrail-ads,
      .HolyGrail-content {
        flex: auto;
      }
    }
    

    3.输入框的布局

    我们常常需要在输入框的前方添加提示,后方添加按钮
    在这里插入图片描述

    HTML代码如下。

    <div class="InputAddOn">
      <span class="InputAddOn-item">...</span>
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">...</button>
    </div>
    
    .InputAddOn {
      display: flex;
    }
    
    .InputAddOn-field {
      flex: 1;
    }
    

    4.悬挂式布局

    有时,主栏的左侧或右侧,需要添加一个图片栏。
    在这里插入图片描述

    HTML代码如下。

        <div class="Media">
          <img class="Media-figure" src="" alt="">
          <p class="Media-body">...</p>
        </div>
    
    

    CSS代码如下。

        .Media {
          display: flex;
          align-items: flex-start;
        }
    
        .Media-figure {
          margin-right: 1em;
        }
    
        .Media-body {
          flex: 1;
        }
    
    

    5.固定的底栏

    有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
    在这里插入图片描述

    HTML代码如下。

        <body class="Site">
          <header>...</header>
          <main class="Site-content">...</main>
          <footer>...</footer>
        </body>
    
    

    CSS代码如下。

        .Site {
          display: flex;
          min-height: 100vh;
          flex-direction: column;
        }
    
        .Site-content {
          flex: 1;
        }
    
    

    6.流式布局

    每行的项目数固定,会自动分行。
    在这里插入图片描述

    CSS的写法。

    .parent {
      width: 200px;
      height: 150px;
      background-color: black;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
    }
    
    .child {
      box-sizing: border-box;
      background-color: white;
      flex: 0 0 25%;
      height: 50px;
      border: 1px solid red;
    }
    
    展开全文
  • Flex 布局教程

    2018-01-02 11:06:13
    Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
  • Flex布局详解

    万次阅读 多人点赞 2021-03-31 21:43:39
    Flex 布局详解 一、入门 1. flex 是什么? flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩,合适适配不同大小的屏幕,和移动端 3.flex 常见...
  • 小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
  • Flex3 实战

    2018-02-07 19:44:21
    Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战
  • 微信小程序源码(含截图)FlexLayout布局微信小程序源码(含截图)FlexLayout布局微信小程序源码(含截图)FlexLayout布局微信小程序源码(含截图)FlexLayout布局微信小程序源码(含截图)FlexLayout布局微信小程序...
  • 其中,展开布局中常用的技术:Flex布局。 Flex布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
  • flex布局(flex 居中)

    千次阅读 2022-04-12 22:01:09
    文章目录什么是flex基本概念容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content项目的属性orderflex-growflex-shrinkflex-basisflexalign-self 最近可真是忙死了啊,忙着写毕业的...
  • 解析flex属性:flex:1究竟是什么

    万次阅读 多人点赞 2021-02-17 23:27:09
    成功搞懂了flex:1呢!
  • flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。 通过我的实践,发现使用flex布局时稍不注意便会遇到三个问题:子元素不平分父元素空间、对文字设置了溢出...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 307,156
精华内容 122,862
关键字:

flex