CSS之flex布局

最新推荐文章于 2024-01-20 10:42:17 发布

李青伟

最新推荐文章于 2024-01-20 10:42:17 发布

阅读量162

点赞数

分类专栏： CSS 文章标签： css布局 flex 双飞翼布局

本文链接：https://blog.csdn.net/qq_40995162/article/details/85175867

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前讲了一下定位方式来进行两栏和双飞翼布局，今天分享一下用flex来布局

Flex布局的基本概念

Flex布局的结构如下图：
在这里插入图片描述

采用Flex布局的容器称为Flex容器，所有子元素自动成为容器成员，称为Flex项目。容器默认存在两根轴，水平的主轴和垂直的交叉轴。主轴的开始位置叫作“主轴起始”，结束位置叫作“主轴结束”。交叉轴的开始位置叫作“交叉轴起始”，结束位置叫作“交叉轴结束”。项目默认沿主轴排列，单个项目占据主轴的空间叫作“项目主轴大小”，占据交叉轴的空间叫作“项目交叉轴大小”。

Flex容器包含了以下属性

属性名称	说明	可选值
flex-direction	决定主轴的方向（项目的排列方向）	row、row-reverse、column、column-reverse
flex-wrap	默认情况下，项目都排在轴线上，如果超出一行，该属性定义如何换行	nowrap、wrap、wrap-reverse
justify-content	定义项目在主轴上的对齐方式	flex-start、flex-end、center、space-between、space-around
align-items	定义项目在交叉轴上的对齐方式	flex-start、flex-end、center、baseline、stretch
align-content	定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性补齐作用	flex-start、flex-end、center、space-between、space-around、stretch

Flex项目包含了以下属性

属性名称	说明
order	定义项目的排列顺序，值越小，排列越靠前，默认值为0
flex-grow	定义项目的放大比例，默认为0
flex-shrink	定义项目的缩小比例，默认为1
flex-basis	定义了在分配剩余空间之前，项目占据的主轴空间。浏览器根据这个属性值来计算主轴的剩余空间。默认值为auto，即项目的实际大小
align-self	设置单个项目的对齐方式，可覆盖Flex容器设置的align-items属性。可选值auto，flex-start，flex-end，center，baseline，stretch

Flex多栏布局

一份代码，多端使用，在不同分辨率下，显示不同效果。在屏幕宽度大于1000像素时，显示为三栏；当屏幕宽度小于1000像素，大于768像素时，隐藏右边侧栏；当屏幕宽度小于768像素时，纵向排列三栏。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Flex</title>

	<style>
		body{
			display:flex;
			min-height:100vh;
			margin:0;
			flex-flow:column;
		}
		.container{
			
			color:red;
			flex:1;
			display:flex;
			
		}
		nav,aside{
			width:200px;
			min-width:200px;
			max-width:200px;
			height:auto;
			background-color:gray;
		}
        .block1,.block2,.side1,.side2{
            height: 350px;
            border:1px solid white;
        }
        .block2,.side2{
            margin-top:10px;
        }
		main{
			flex:1;
			background-color:#999;
		}
		footer{height:40px;
			background-color:#999;
			text-align:center;
		}
		@media (max-width:1000px){
			aside{
				display:none;
			}
		}
		@media (max-width:768px){
			container{
				flex-direction:column;
			}
			nav,aside{
				width:100%;
				min-width:100%;
				max-width:100%;
			}
			aside{
				display:block;
			}
			main{
				min-width:90vh;
				height:90vh;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<nav>
			<div><a href="#">link</a></div>
			<div>...</div>
		</nav>
		<main>
			<div class="block1">this is block1</div>
			<div class="block2">this is block2</div>
		</main>
		<aside>
			<div class="side1">side1</div>
			<div class="side2">side2</div>
		</aside>
	</div>
	<footer>copyright liqingwei</footer>
</body>
</html>

在这里插入图片描述

李青伟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之flex布局

之前讲了一下定位方式来进行两栏和双飞翼布局，今天分享一下用flex来布局Flex布局的基本概念Flex布局的结构如下图：采用Flex布局的容器称为Flex容器，所有子元素自动成为容器成员，称为Flex项目。容器默认存在两根轴，水平的主轴和垂直的交叉轴。主轴的开始位置叫作“主轴起始”，结束位置叫作“主轴结束”。交叉轴的开始位置叫作“交叉轴起始”，结束位置叫作“交叉轴结束”。项目默认沿主轴排列...
复制链接

扫一扫