flex布局

时光无声￡

已于 2022-01-19 21:51:22 修改

阅读量328

点赞数

分类专栏： CSS 文章标签： flex

于 2021-07-28 16:32:11 首次发布

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119182487

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

flex布局教程

注意点

1. flex-flow = flex-direction + flex-wrap

2. align-items 控制侧轴只对单行/单列的情况下有效

3. align-content 控制侧轴只对多行/多列的情况下有效

4. flex = flex-grow + flex-shrink + flex-basis

默认值
flex-grow: 0 不可继承
flex-shrink: 1
flex-basis: auto

flex: 1 这是等分布局

5. flex-grow的计算方式:

假设有一个div内包含三个子div宽度分别为100px.div1,div2,div3的flex-grow分别设置为 1，2，3. 现在假定外层div的宽度是600px,那么剩下的就是600px - 3*100px = 300px, 三个div额外分配的空间如下：
div1：1 / (1+2+3) * 300px = 1/6 * 300px
div2：2 / (1+2+3) * 300px = 2/6 * 300px
div3：3 / (1+2+3) * 300px = 3/6 * 300px

6. flex-shrink的计算方式

假设有一个div的宽度为600px,这个div内有3个子div
div1: flex: 1 1 200px
div2: flex: 1 2 300px
div3: flex: 1 3 400px
这3个div最终的宽度为:
let 总值 = 收缩因子与基准值乘积的总和
let 总值 = 1 * 200 + 2 * 300 + 3 * 400 = 2000
let 溢出的空间 = 200 + 300 + 400 - 600 = 300
div1: 200 - 1 * 200 / 2000 * 300 = 170px
div2: 300 - 2 * 300 / 2000 * 300 = 210px
div3: 400 - 3 * 400 / 2000 * 300 = 220px

flex-shrink的代码例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.box {
			  width: 600px;
			  display: flex;
			}
			.box > div {
			  height: 100px;
			}
			
			.div1 {
			  flex: 1 1 200px;
			  background: green;
			}
			.div2 {
			  flex: 1 2 300px;
			  background: yellow;
			}
			.div3 {
			  flex: 1 3 400px;
			  background: pink;
			}

		</style>
	</head>
	<body>
	  <div class="box">
	      <div class='div1'>1</div>
	      <div class='div2'>2</div>
	      <div class="div3">3</div>
	  </div>

	</body>
</html>

效果图

在这里插入图片描述

flex新旧版本

1.flex基础点
—什么是容器，什么是项目，什么是主轴，什么是侧轴？
—项目永远排列在主轴的正方向上
—flex分新旧两个版本
-webkit-box
-webkit-flex / flex

2.注意点
	---我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？
		移动端开发者必须要关注老版本的flex
			因为很多移动端设备内核低只老版本的flex
	
	---老版本的box通过两个属性四个属性值控制了主轴的位置和方向
	      新版本的flex通过一个属性四个属性值控制了主轴的位置和方向

3.老版本
	容器
		容器的布局方向
			-webkit-box-orient:horizontal/vertical
			控制主轴是哪一根
				horizontal：x轴
				vertical  ：y轴
		容器的排列方向
			-webkit-box-direction：normal/reverse
			控制主轴的方向
				normal：从左往右（正方向）
				reverse：从右往左（反方向）
		富裕空间的管理
			只决定富裕空间的位置，不会给项目区分配空间
			主轴
				-webkit-box-pack
					主轴是x轴
						start：在右边
						end:	在左边
						center：在两边
						justify：在项目之间
					主轴是y轴
						start：在下边
						end：在上边
						center：在两边
						justify：在项目之间
			侧轴
				-webkit-box-algin
					侧轴是x轴
						start：在右边
						end：  在左边
						center：在两边
					侧轴是y轴
						start：在下边
						end：   在上边	
						center：在两边
					
4.新版本
弹性容器属性
    flex-direction 控制主轴方向
    flex-wrap		控制侧轴方向
    flex-flow		是前两个的缩写
    justify-content	控制主轴上的项目对齐方式
    align-items		控制侧轴上的项目对齐方式(只有单行/列的情况下有效)
    align-content	控制侧轴上的项目对齐方式(只有多行/列的情况下有效)
弹性元素属性
    order			项目按照 order 属性的值的增序进行布局
    align-self		会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 
    flex-grow		拉伸因子(将主轴上的剩余空间平均分给各个项目的width(主轴为横着的)或者height(主轴为竖着的))
    flex-shrink		收缩因子
    flex-basis		指定了 flex 元素在主轴方向上的初始大小(width/height)

	flex 是 flex-grow，flex-shrink，flex-basis 的简写属性

	容器
		容器的布局方向
		容器的排列方向
			flex-direction
			控制主轴是哪一根，控制主轴的方向
				row;		从左往右的x轴	
				row-reverse;从右往左的x轴
				column;		从上往下的y轴
				column-reverse;从下往上的y轴
		对齐的方式
			主轴
				justify-content
						flex-start：		在主轴的正方向
						flex-end:		在主轴的反方向
						center：			在两边
						space-between：	在项目之间
						 space-around：  在项目两边
						
			侧轴
				align-items
						flex-start：在侧轴的正方向
						flex-end：    在侧轴的反方向
						center：		在两边
						baseline    基线对齐
     					stretch		等高布局（项目没有高度）
     	flex-wrap: 属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。
     		可选值:
     			nowrap 默认值    不换行
            	wrap 			换行
                wrap-reverse	换行翻转
        align-content: 属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。当弹性容器只有一行/列时无作用
					   当弹性容器只有一行/列时	align-items 起作用
			可选值:
				stretch (默认值)
                拉伸所有行/列来填满剩余空间。剩余空间平均的分配给每一行/列 
				flex-start
                所有行/列从侧轴起点开始填充。第一行/列的侧轴起点边和容器的侧轴起点边对齐。
                接下来的每一行/列紧跟前一行/列。
                flex-end
                所有弹性元素从侧轴末尾开始填充。最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。
                同时所有后续元素与前一个对齐。
                center
                所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。
                容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离。
                space-between
                所有行/列在容器中平均分布。相邻两行/列间距相等。
                容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的边对齐。
                space-around
                所有行/列在容器中平均分布，相邻两行/列间距相等。
                容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的距离是相邻两行/列间距的一半。
         flex-flow: 是主轴方向和侧轴方向的缩写属性
         			flex-direction + flex-wrap
                        
	项目
		主轴上的空间管理
			flex-grow: number(弹性因子)
				将主轴上的剩余空间平均分给各个项目的width(主轴为横着的)或者height(主轴为竖着的)
				计算方式:
					可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)    --> 没有flex-basis就以项目的width/height为准
                    可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
                    每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
				伸缩基准值  ---> 是项目的flex-basis或者width/height
		order: 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码				   中出现的顺序进行布局
		align-self: 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
		flex-basis		指定了 flex 元素在主轴方向上的初始大小(width/height)
		flex-shrink: 
			计算方式:
				1.收缩因子与基准值乘的总和  
                2.收缩因数
                	收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和    
                3.移除空间的计算
                	移除空间= 项目收缩因数 x 负溢出的空间 
        flex 是 flex-grow，flex-shrink，flex-basis 的简写属性
 
             默认值  
                 flex-grow: 0               不可继承
                 flex-shrink: 1
                 flex-basis: auto 

            值
                flex: none;/* 0 0 auto */
                flex：1;/* 1 1 0% */   等分布局