flex布局

最新推荐文章于 2025-02-11 12:18:01 发布

bjt_yy

最新推荐文章于 2025-02-11 12:18:01 发布

阅读量340

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/bjt_yy/article/details/118857809

版权

前端专栏收录该内容

6 篇文章

订阅专栏

flex布局

1.flex布局写法
通过学习，我理解到的flex布局就是一个弹性盒子，它只作用于flex容器的直接子项目（元素）。在需要使用弹性盒子布局几个元素的父容器设置

display:flex;

在给父容器设置display之后子元素会变成行内块元素，可以直接设置高度宽度。
在移动端相关的项目上使用弹性盒子可以更好的自适应屏幕宽度。

2.flex相关的一些属性

对父容器

/*  
 flex-direction
	设置弹性布局主轴的方向
	包括：row(横向，默认值)，column(纵向)
	row-reverse(行反转)，column-reverse(列反转)
*/

/*
justify-content:
	默认行排列情况下对容器内元素的控制
	常用有五种属性值
		space-between;均匀占满一行 两边紧靠 中间空隙
		space-around 均匀占满一行 两边也有空隙
		flex-start往flex容器主轴开始的位置靠拢（左）中间没有空隙
		flex-end  往flex容器主轴结束位置靠拢（右）中间没有空隙
		center  居中，中间没有空隙
*/

称垂直于主轴的轴为交叉轴，主轴默认情况下是横向的，交叉轴是纵向的。

/* 
align-item
	对垂直于主轴的交叉轴方向的元素控制
	常见有三种：
	（主轴方向默认情况下）
		center  居中
		flex-start  居上
		flex-end  居下
 */

/*
 align-content:
	控制交叉轴方向的排列
	常用有几种属性值
		center;在交叉轴上居中显示
		space-around  两边留空，均匀分布
		space-between  两边紧靠，中间留空，均匀分布
		flex-start 靠在交叉轴开始的部分（上/左）
		flex-end  靠在交叉轴尾部的位置（下/右）
*/

/* 
flex-wrap
	控制元素排列是否换行
	常用有几种： 
		默认值nowrap不换行  
		wrap;换行 
		wrap-reserve;允许换行并且排列为反排列
*/

/*
flex-flow是flex-deraction和flex-wrap属性的结合 
 e.g.  flex-flow:column wrap;
*/

对容器内的子元素

/* 	给容器里面不同子元素的设置不同的flex 每个元素按比例分配宽度
	例如：
	给第一个元素设置flex:1;
	给第二个元素设置flex:2;
	那么默认主轴方向的情况下不论浏览器宽度怎么变化第二个元素是第一个元素的两倍宽
*/
<style>
	header{
					display: flex;
					height: 300px;
					width: 100%;
				}
				div:nth-child(1){
					background-color: red;
					
					flex: 1;
				}
				div:nth-child(2){
					background-color: yellow;
					flex: 2;
					
				}
				div:nth-child(3){
					background-color: #00008B;
					flex: 1;
				}
</style>

<body>
	<header>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</header>
</body>

/* 对某一容器内元素设置
	align-self:center/flex-start/flex-end
可以使对应子元素有自己的不同于父元素给定的样式*/

/* 
order:0;默认值，正常排列
例如给第二个子项目（元素）设置order:-1;
那么第二个元素就到第一个位置去了
 */
 <style>
 header{
				display: flex;
				height: 300px;
				width: 100%;
			}
			div:nth-child(1){
				background-color: red;
				flex:1;
			}
			div:nth-child(2){
				background-color: yellow;
				order: -1;
				flex:2;
				
			}
			div:nth-child(3){
				background-color: #00008B;
				flex:1;
			}
 </style>
 
<body>
	<header>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</header>
</body>