flex弹性布局的应用三之flex-warp属性

最新推荐文章于 2024-01-09 17:20:36 发布

置顶自在飞花轻似梦paofu

最新推荐文章于 2024-01-09 17:20:36 发布

阅读量7k

点赞数

分类专栏： CSS 文章标签： css

原创珍贵，转载请声明出处。

本文链接：https://blog.csdn.net/weixin_42277214/article/details/92007836

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关于flex-warp属性的使用
1、使用方式

display: flex;	//弹性盒子，默认弹性盒元素的方向是横向
flex-wrap: wrap;	//在必要时换行
align-content: stretch;	//堆栈排列，控制wrap换行

在这里插入图片描述

2、使用方式

display: flex;
justify-content: space-between;
align-items: center;	//加
flex-wrap: wrap;	//加
align-content: stretch;

在这里插入图片描述
主要代码
使用时，在content类中，加入不同使用方式的代码即可

  <!DOCTYPE html>
    <html>
    <head>
    	<title>flex布局的应用</title>
    	<style type="text/css">
    		.content{
    			width: 800px;
    			height: 400px;
    			background-color:#dbdbdb;
    
    		}
    		.c-1{
    			width: 115px;
    			height: 50px;
    			background-color:pink;
    			border: 1px solid #f44336;
    		}
    	</style>
    </head>
    <body>
    	<div class="content">
    		<div class="c-1">1</div>
    		<div class="c-1">2</div>
    		<div class="c-1">3</div>
    		<div class="c-1">4</div>
    	</div>
    </body>
    </html>

优惠劵

自在飞花轻似梦paofu

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
flex弹性布局的应用三之flex-warp属性

关于flex-warp属性的使用1、使用方式display: flex; //弹性盒子，默认弹性盒元素的方向是横向flex-wrap: wrap; //在必要时换行align-content: stretch; //堆栈排列，控制wrap换行2、使用方式display: flex;justify-content: space-between;align-items: cente...
复制链接

扫一扫