弹性布局介绍

最新推荐文章于 2024-08-10 17:13:35 发布

一念花开丶君临天下

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_43431024/article/details/100766477

版权

一.弹性布局 (重点****************)
首先，给大家上个例子对着下面的属性介绍方便理解

<html>
<head>
<style>
.fu{
	width:100%;
	height:100px;
	display:flex; //设置弹性
	flex-direction:row; //设置横向
	flex-wrap:wrap;//空间不够，就换行，项目不压缩
	justify-content:space-around;//每个子元素间隔相同
	align-items:center;//子元素在纵向的位置  这里是居中  也就是垂直居中
}
.zi{
	width:15px;
	height:15px;
	background-color:pink;
}
</style>
</head>
<body>
	<div class="fu">
		<div class="zi"></div>
		<div class="zi"></div>
		<div class="zi"></div>
		<div class="zi"></div>
	</div>
</body>
</html>

1.什么是弹性布局
弹性布局就是一种布局方式
主要解决某元素中的子元素的布局方式，为布局提供最大的灵活性
2.弹性布局的相关概念和专业术语

1.容器
要布局的子元素的父元素称之为容器，容器中写display:flex
2.项目
要布局的子元素称之为项目
3.主轴
项目们排列的方向，称之为主轴（水平和垂直）
如果项目们是按照横向排列，x轴就是主轴
如果项目们是按照纵向排列，y轴就是主轴
4.交叉轴
与主轴垂直相交的方向轴叫做交叉轴
语法
将元素变为弹性容器，他所有的子元素将变成弹性项目，按照弹性布局的方式去排列显示
display
取值：flex, 将块级元素变为容器
inline-flex,将行内元素变为容器
元素设置为flex容器之后，子元素一些样式属性会失效
float/clear/vertical-align失效
子元素允许修改尺寸(项目是行内元素也可以修改尺寸)
容器的对齐方式text-align失效
3.弹性容器的样式属性
1.flex-direction 主轴方向
取值
1.row 默认值，主轴是x轴，主轴起点在左端
2.row-reverse, 主轴是x轴，主轴起点在右端
3.column 主轴是y轴，主轴起点在顶端
4.column-reverse主轴是y轴，主轴起点在底部
2.flex-wrap
当一个主轴排列不下所有项目时,项目的显示方式
取值
1.nowrap 默认值，空间不够，不换行，项目会自动压缩
2.wrap 空间不够，就换行，项目不压缩
3.wrap-reverse 换行，反转
3.flex-flow
是flex-direction和flex-wrap的缩写
取值 direction wrap;
ex:flex-flow:row wrap;
4.justify-content
定义项目在主轴上的对齐方式
取值

space-between 两端对齐
2.space-around 每个间距相同
3.flex-start 默认值在主轴起点对齐
4.flex-end 在主轴的终点对齐
5.center 在主轴上居中对齐
5.align-items (容器高度大于项目高度)
项目们在交叉轴上的对齐方式
取值：
1.flex-start 交叉轴起点对齐
2.flex-end 交叉轴终点对齐
3.center 交叉轴居中对齐
4.baseline 交叉轴基线对齐
5.stretch 如果项目未设置高度，在交叉轴上充满容器
4.项目的属性
是单独设置给一个项目的，不影响容器和其他项目
1.order
取值为无单位的整数，定义项目的排列顺序，值越小，离起点越近，默认值为0；
2.flex-grow
定义项目的放大比例
如果容器有足够大的剩余空间，项目将按照比例放大
取值为无单位整数，
默认值为0.不放大。取值越大，占据的剩余空间越多
3.flex-shrink
定义项目的缩小比例，空间不足时，项目该如何缩小
取值为无单位整数
默认值为1，空间不足，等比缩小
0，不缩小
取值越大，占据的空间越小
4.align-self
控制当前项目在交叉轴上对齐方式，与其他项目无关
1.flex-start 交叉轴起点对齐
2.flex-end 交叉轴终点对齐
3.center 交叉轴居中对齐
4.baseline 交叉轴基线对齐
5.stretch 如果项目未设置高度，在交叉轴上充满容器
6.auto 继承容器的align-items的效果