CSS的flex布局详解

最新推荐文章于 2024-06-21 16:42:16 发布

zky的博客

最新推荐文章于 2024-06-21 16:42:16 发布

阅读量2.6k

点赞数 5

分类专栏： flex布局

原文链接：https://www.runoob.com/w3cnote/flex-grammar.html

版权

flex布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flex布局使用场景越来越多，flex布局的好处是比较容易上手，但浏览器兼容性比较差，只能兼容到ie9及以上。，里边的属性也是很多，下面一一介绍
首先要在父元素上加上 display: flex; 相当于这块就是一个弹性盒子

<style type="text/css">
		 .div{
			 width: 100px;
			 height: 100px;
			 border: 1px solid black;
		 }
</style>

<body>
	  <div style="display: flex;width: 500px;height: 300px;border: 1px solid red;">
		  <div class="div"></div>
		  <div class="div"></div>
		  <div class="div"></div>
		  <div class="div"></div>
	  </div>
	</body>

当你只给父元素设置display: flex时他的子元素默认是向X正轴排序的
在这里插入图片描述
下边来看看display: flex的一些常用属性，以下属性设置容器上。也就是父元素上

flex-direction属性决定主轴的方向(默认不写就是X正轴方向也就是起点在左端)它的值有以下几个
flex-direction:row(默认值)主轴为水平方向，起点在左端
flex-direction:row-reverse 主轴为水平方向，起点在右端。
flex-direction:column 主轴为垂直方向，起点在上沿。
flex-direction:column-reverse 主轴为垂直方向，起点在下沿。

值的作用 column-reverse column row row-reverse分别对应下边图片
在这里插入图片描述

flex-wrap属性默认认情况下，项目都排在一条线（又称”轴线”）上，flex-wrap属性定义，如果一条轴线排不下，如何换行。不写这个属性，子元素会一直在轴线上，即使排不下，也不会换行
flex-wrap： nowrap（默认）：不换行。
flex-wrap： wrap：换行，第一行在上方。
flex-wrap：wrap-reverse：换行，第一行在下方。

nowrap（默认） 在这里插入图片描述

wrap
在这里插入图片描述
wrap-reverse

justify-content属性定义了项目在主轴上的对齐方式。
justify-content： flex-start（默认值）：左对齐
justify-content： flex-end 右对齐
justify-content： center 居中
justify-content： space-between 两端对齐，项目之间的间隔都相等。
justify-content：space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述
基本上到这里，就够用的，更详细更多属性可以看这里https://www.runoob.com/w3cnote/flex-grammar.html

zky的博客

关注

5
点赞
踩
18

收藏

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

flex布局使用场景越来越多，flex布局的好处是比较容易上手，但浏览器兼容性比较差，只能兼容到ie9及以上。，里边的属性也是很多，下面一一介绍首先要在父元素上加上 display: flex; 相当于这块就是一个弹性盒子<style type="text/css"> .div{ width: 100px; height: 100px; border: 1px solid black; }</style><body>
复制链接

扫一扫

专栏目录