弹性布局的简单介绍

在学习弹性布局之前,首先要了解它的概念。
弹性布局(flex),字面上理解就是有弹性的布局。弹性布局是html中十分方便的一个布局,它可以让结构中的内容自适应不同的分辨率,简化了许多繁琐的代码。

弹性布局的语法分为两种:一、加给父容器的语法 二、加给子项目的语法
加给父容器的语法:

display:flex;
flex-direction;
flex-wrap;
flex-flow;
justify-content;
alig-items;
align-content;

加给子项目的语法:

order;
flex-grow;
flex-shrink;
flex-basis;
flex;
align-self;

父容器属性:

display:flex就是将容器变为有弹性的盒子

	.father{
		display: flex;
	}

在这里插入图片描述
flex-direction定义容器从哪个方向堆放子项目,row就是水平从左往右堆放,column就是垂直从上往下堆放,-reverse就是反向堆放。
从左往右堆放项目

	.father{
		display: flex;
		flex-direction:row;
	}

在这里插入图片描述
从上往下堆放项目

	.father{
		display: flex;
		flex-direction:column;
	}

在这里插入图片描述
从右往左堆放项目

	.father{
		display: flex;
		flex-direction:row-reverse;
	}

在这里插入图片描述
同理,加上column-reverse就可以实现从下往上堆放项目。
flex-wrap规定子项目是否换行,wrap规定换行,no-wrap规定不换行,wrap-reverse规定项目以相反的顺序换行
规定项目换行

	.father{
		display: flex;
		flex-wrap:wrap;
	}

在这里插入图片描述
规定项目不换行

	.father{
		display: flex;
		flex-wrap:no-wrap;
	}

在这里插入图片描述
规定项目以反方向换行

	.father{
		display: flex;
		flex-wrap:wrap-reverse;
	}

在这里插入图片描述
flex-flow是用于同时设置flex-direction和flex-wrap属性的简写属性

	.father{
		display: flex;
		flex-flow:row wrap;
	}

在这里插入图片描述
justify-content用于对齐子项目,center将项目在容器的中心对齐,flex-start将项目在容器的开头对齐(默认值),flex-end将项目在容器的末端对齐,space-around显示行之前、之间和之后带有空格的项目,space-between显示行之间带有空格的项目。
中心对齐

	.father{
		display: flex;
		justify-content:center;
	}

在这里插入图片描述
开头对齐

	.father{
		display: flex;
		justify-content:flex-start;
	}

在这里插入图片描述
末端对齐

	.father{
		display: flex;
		justify-content:flex-end;
	}

在这里插入图片描述
显示行之前、之后和之间的间隔

	.father{
		display: flex;
		justify-content:space-around;
	}

在这里插入图片描述
显示行之间的间隔

	.father{
		display: flex;
		justify-content:space-between;
	}

在这里插入图片描述
align-items用于垂直对齐项目,center将项目在容器中间对齐,flex-start将项目在容器顶部对齐,flex-end 将项目在容器底部对齐,stretch拉伸项目以填充容器(默认),baseline值使项目基线对齐。

center:将项目在容器中间对齐
flex-start:将项目在容器顶部对齐
flex-end:将项目在容器底部对齐
stretch:拉伸项目以填充容器(默认)
baseline:使项目基线对齐

align-content用于对齐弹性线

space-between:弹性线之间的距离相等
space-around:弹性线在之前,之后和之间带有空格
stretch:拉伸弹性线占据剩余空间(默认)
center:在容器中间显示弹性线
flex-start:在容器开头显示弹性线
flex-end:在容器末端显示弹性线

子项目属性

order规定项目的顺序

默认值为0
值越小排在越前面

flex-grow规定某个项目相对于其他项目将增长多少

默认值为0

flex-shrink规定某个项目对于其余项目将收缩多少

默认值为0

flex-basis规定项目的初始长度

默认为auto
可以自己设定width,height使项目占据固定的空间

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

可以按照上面顺序指定值,默认值分别为0 0 auto

align-self

规定容器内所选项目的对齐方式
可以覆盖容器的align-items属性所设置的对齐方式

以上就是弹性布局的简单介绍,要想更深入的了解弹性布局的用法,还得要多敲代码观察不同,合理的运用弹性布局也能让我们的制作变得简单一点。

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex布局,也称为弹性布局,是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页,避免了浮动脱标的问题。通过使用Flex布局,我们可以精确灵活地控制块级盒子的布局方式,避免浮动布局中脱离文档流现象的发生。Flex布局非常适合用于结构化布局。 Flex布局的设置方式是在父元素上添加`display: flex`,这样子元素就可以自动地被挤压或拉伸。Flex布局弹性容器、弹性盒子、主轴、侧轴/交叉轴组成。 在Flex布局中,`flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`三个属性的简写,默认值为`0 1 auto`。其中`flex-grow`表示弹性元素的放大比例,`flex-shrink`表示弹性元素的缩小比例,`flex-basis`表示弹性元素的初始大小。 除了`flex`属性,还有一些其他的属性可以用来设置Flex布局,这些属性设置在容器上,包括`flex-direction`、`flex-wrap`、`flex-flow`、`justify-content`、`align-items`和`align-content`等属性,用来控制弹性容器和弹性盒子的布局方式。 总结来说,Flex布局是一种简单、灵活的布局模型,通过使用弹性容器和弹性盒子,可以精确控制块级盒子的布局方式,避免了浮动布局中的问题。使用Flex布局可以使网页的布局更加简单、灵活,适用于结构化布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Flex布局(弹性布局)-图文介绍](https://blog.csdn.net/qq_52031408/article/details/124053711)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [flex弹性布局](https://blog.csdn.net/m0_48958478/article/details/125508280)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值