CSS弹性盒子的讲解

最新推荐文章于 2023-09-26 17:12:53 发布

喜欢爱笑的女孩子

最新推荐文章于 2023-09-26 17:12:53 发布

阅读量199

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_52899829/article/details/121554712

版权

Flex弹性盒子布局,弹性布局，任何一个容器都可以指定为弹性盒子

注意：设置为flex布局以后，子元素的float浮动,clear清除浮动，vertical-align属性都将失效

display:flex; 给父元素添加，子元素受影响排在一行/一列

<div class=”div2”>1 div2将显示在一行</div>

</div>

子元素的位置

flex-direction:row;//水平方向，从左侧开始

flex-direction:row-reverse;水平方向，从右侧开始

flex-direction:column;垂直方向,从上往下

flex-direction:column-reverse;垂直方向，从下往上

内容对齐

justify-content:flex-start;默认值，从左开始依次排列

justify-content:flex-end;右侧依次排列

justify-content:center;整体居中

justify-content:space-between;平均分布，左右贴近父元素的边缘没有间距

justify-content:space-around;平均分布，收尾两边有间距

align-items:center;垂直居中

align-items:flex-end;垂直方向底部

align-items:stretch;子元素在不设置高的情况下，尽可能接近父元素的高

flex-wrap: wrap;弹性盒子为多行，在溢出时换行

align-content:center;多行弹性盒子，子元素的对齐flex-start,flex-end,center,space-around,space-between

align-self:center;弹性元素自身的垂直位置,flex-start,flext-end,stretch

常用布局实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div1{ display: flex; width: 1000px; border: 1px solid #000; margin: 0 auto; height: 300px; justify-content: space-between;flex-wrap: wrap;}
			.div2{ width: 300px; height: 100px; background: red;}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">1</div>
			<div class="div2 item2">2</div>
			<div class="div2 item3">3</div>
			<div class="div2">1</div>
			<div class="div2 item2">2</div>
			<div class="div2 item3">3</div>
		</div>
	</body>
</html>

喜欢爱笑的女孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS弹性盒子的讲解

Flex弹性盒子布局,弹性布局，任何一个容器都可以指定为弹性盒子注意：设置为flex布局以后，子元素的float浮动,clear清除浮动，vertical-align属性都将失效display:flex; 给父元素添加，子元素受影响排在一行/一列<div style=”display:flex”><div class=”div2”>1 div2将显示在一行</div><div class=”div2”>2</div><
复制链接

扫一扫