Html——flex布局弹性布局

本文介绍: 以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案。一、flex 布局的语法块级元素：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示行内元素：display: inline–flex ———— 将容器盒模型作为内联级弹性伸缩盒显示设置 flex 布局后，flex item的float、cle ar和v e rt ical-align 属性都失效 flex布局默认为横向二、容器属性 flex的排列属性：元素名称说明

块级元素：di s play: fl e x ———— 将容器盒模型作为块级弹性伸缩盒显示

行内元素：di s play: in line–fl e x ———— 将容器盒模型作为内联级弹性伸缩盒显示

设置 fl e x布局后，fl ex item的flo a t、cle ar和vert ical-align 属性都失效

flex布局默认为横向

#div{
    display:flex;
    flex-direction：column
}—————— 当子级flex为1时，设置属性自动均分

没有设置子级flex为1时：flex-wrap


<body>
		<div id="box">
			<div class="item">1111</div>
			<div class="item">2222</div>
			<div class="item">3333</div>
			<div class="item">444</div>
		</div>
</body>

	<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
            /* 定义项目的排列顺序，数值越小排列越靠前，默认为0 */
			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				background-color: plum;
				display: flex;
			}

			.item {
				width: 100px;
				background-color: gold;
			}

			.item:first-child {
				height: 20px;
				margin-right: 10px;
				order: 3;
			}

			.item:nth-child(2) {
				height: 30px;
				margin-right: 10px;
			}

			.item:nth-child(3) {
				height: 70px;
				margin-right: 10px;
				order: 0;
			}

			.item:last-child {
				height: 50px;
				margin-right: 10px;
				order: 2;
			}
		</style>


<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				background-color: plum;
				display: flex;
			}

			.item {
				background-color: gold;
				flex-grow: 1;/* 分配剩余平均空间 ，
                平均分配的含义是，去掉内容后的空间进行均分，
                如果本身内容多，虽然均分，但还是占比较大空间*/
			}

			.item:first-child {
				height: 20px;
			}

			.item:nth-child(2) {
				height: 30px;
			}

			.item:nth-child(3) {
				height: 70px;
			}

			.item:last-child {
				height: 50px;
			}
</style>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				background-color: plum;
				display: flex;
			}

			.item {
				width: 200px;
				background-color: gold;
			}

			.item:first-child {
				height: 20px;
				flex-shrink: 0;
				/* 不缩放 */
			}

			.item:nth-child(2) {
				height: 30px;
			}

			.item:nth-child(3) {
				height: 70px;
				flex-shrink: 5;
				/* 严重缩放 */
			}

			.item:last-child {
				height: 50px;
			}
		</style>

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
            /* 设置同一行内排列属性，默认值为平均分配 */
			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				background-color: plum;
				display: flex;
			}

			.item {
				height: 50px;
				text-align: center;
				border: 1px solid aqua;
				background-color: gold;
				/* 第一步：平均分配剩余空间 */
				flex-grow: 1;
			}

			.item:first-child {
				background-color: #FFFF00;
				/* 第二步，想占多少地方，可以设置宽度 */
				-width: 150px;
				flex-basis: 150px;
				-flex-basis: 40%;
				-flex-basis: 20rem;
			}

			.item:nth-child(2) {
				background-color: chocolate;
				/* 第三步：默认值auto */
				flex-basis: auto;
			}

			.item:nth-child(3) {
				background-color: #008000;
			}

			.item:last-child {
				background-color: red;
			}
		</style>

		<style type="text/css">
			*{margin: 0;padding: 0;box-sizing: border-box;}
			#box{
				width: 600px;height: 300px;margin: 100px auto;
                background-color: skyblue;
				display: flex;
				align-items: center;
			}
			.item{
				background-color: red;
				border: 1px solid yellow;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #fff;
				flex: 1;
			}
			.item:first-child{
				background-color: gold;
			}
			.item:nth-child(2){
				background-color: chocolate;
				align-self: flex-start;
				-align-self: flex-end;
				-align-self: baseline;
				-align-self: stretch;
			}
			.item:last-child{
				background-color: green;
				align-self: flex-end;
			}
		</style>

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

flex 块级布局

元素名称	说明
flex-direction：column	设置从上往下排列
flex-direction：row	设置从左到右排列
flex-direct ion：row–reverse	设置从右到左排列
flex-direct ion：column	设置从上到下排列
flex-direct ion：colum n–reverse	设置从下到上排列

元素名称	说明
flex-w r ap：now r ap	默认值，都在一行或一列显示
flex-wr a p：wr a p	伸缩项目无法容纳时，自动换行
flex-wra p：wra p–reverse	伸缩项目无法容纳时，自动换行，方向和 wra p 相反

元素名称	说明
justify–content：flex-start	伸缩项目以起始点靠齐
justify–content：flex-end	伸缩项目以结束点靠齐
justify–content：center	伸缩项目以中心点靠齐
justify–content：space–between	伸缩项目平均分布
justify–content：space-around	伸缩项目平均分布，但两端保留一半的空间

元素名称	说明
align–i t mes：flex-start	伸缩项目以顶部为基准，清理下部额外空间
ali g n–i t mes：flex-end	伸缩项目以底部为基准，清理上部额外空间
ali g n–i t mes：ce n ter	伸缩项目以中部为基准，平均清理上下部额外空间
align-it mes：base line	伸缩项目以基线为基准，清理额外的空间
align-it mes：str etc h	伸缩项目填充整个容器，默认

元素名称	说明
align-content：flex-start	与交叉轴的起点对齐
align-content：flex-end	与交叉轴的终点对齐
align-content：center	与交叉轴的中点对齐
align-content：space–between	与交叉轴两端对齐，轴线之间的间隔平均分布
align-content：s pace-around	每根轴线两侧的间隔都相等，所以，轴线之间的间隔比线与边框的间隔大一倍
align-content：str etc h	轴线占满整个交叉轴

一、flex布局的语法

二、容器属性

flex的排列属性：

flex换行属性：

伸缩属性：

align–item s属性： ———— 处理伸缩项目容器的额外空间

align-c on tent属性： ———— 定义了多根轴线对齐 方式

三、项目属性

发表回复取消回复

一、flex布局的语法

二、容器属性

flex的排列属性：

flex换行属性：

伸缩属性：

align–items属性： ———— 处理伸缩项目容器的额外空间

align-content属性： ———— 定义了多根轴线对齐方式

三、项目属性

相关文章

发表回复 取消回复

align–item s属性： ———— 处理伸缩项目容器的额外空间

align-c on tent属性： ———— 定义了多根轴线对齐方式

发表回复取消回复