css display:flex应用

最新推荐文章于 2024-07-18 17:09:28 发布
最新推荐文章于 2024-07-18 17:09:28 发布
阅读量485 收藏
点赞数
分类专栏： css基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25186543/article/details/79082821
版权

display:flex是盒子模型，有兼容模式，要IE8以上的浏览器，

以下属性都要在 display : flex 的前提下才有效   .box

flex :1 || 2 || 3   

计算一共有几个 flex 然后拿总长度除于份额，再按每份计算

	.box{
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		display:flex;
	}
	.flex{
		-webkit-box-flex:1;
		-moz-box-flex:1;
		-ms-box-flex:1;
		box-flex:1;
		flex:1;
	}

flex-wrap

类似浮动向左一样，一直排列下去


flex-direction

flex-direction: row  ||  row-reverse ||  column ||   column-reverse    把子元素 上下左右排列 
.flex-direction-row{flex-direction: row}
	.flex-direction-row-reverse{flex-direction: row-reverse}
	.flex-direction-column{flex-direction: column}
	.flex-direction-column-reverse{flex-direction: column-reverse}



justify-content

justify-content : flex-start  ||　flex-end ||  center || space-between ||   space-around 
	.justify-content-start{-webkit-justify-content: flex-start;      justify-content: flex-start;}
	.justify-content-end{-webkit-justify-content: flex-end;      justify-content: flex-end;}
	.justify-content-center{-webkit-justify-content:center;      justify-content:center}
	.justify-content-space-between{-webkit-justify-content: space-between;     justify-content: space-between;}
	.justify-content-space-around{-webkit-justify-content: space-around;       justify-content: space-around;}


align-items

	.align-items-start{-webkit-align-items:flex-start;align-items:flex-start;}
	.align-items-end{-webkit-align-items:flex-end;align-items:flex-end;}
	.align-items-center{-webkit-align-items:center ;align-items:center ;}
	.align-items-baseline{-webkit-align-items:baseline;align-items:baseline;}
	.align-items-stretch{-webkit-align-items:stretch;align-items:stretch;}

align-content

	.align-content-start{-webkit-align-content: flex-start;align-content: flex-start;}
	.align-content-end{-webkit-align-content: flex-end;align-content: flex-end;}
	.align-content-center{-webkit-align-content: center;align-content: center;}
	.align-content-space-between{-webkit-align-content: space-between;align-content: space-between;}
	.align-content-space-around{-webkit-align-content: space-around;align-content: space-around;}
	.align-content-stretch{-webkit-align-content: stretch;align-content: stretch;}


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style type="text/css">
	.box{
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		display:flex;
	}
	.flex{
		-webkit-box-flex:1;
		-moz-box-flex:1;
		-ms-box-flex:1;
		box-flex:1;
		flex:1;
	}
	.flex-wrap{flex-wrap:wrap;}
	
	.flex-direction-row{flex-direction: row}
	.flex-direction-row-reverse{flex-direction: row-reverse}
	.flex-direction-column{flex-direction: column}
	.flex-direction-column-reverse{flex-direction: column-reverse}

	.justify-content-start{-webkit-justify-content: flex-start;      justify-content: flex-start;}
	.justify-content-end{-webkit-justify-content: flex-end;      justify-content: flex-end;}
	.justify-content-center{-webkit-justify-content:center;      justify-content:center}
	.justify-content-space-between{-webkit-justify-content: space-between;     justify-content: space-between;}
	.justify-content-space-around{-webkit-justify-content: space-around;       justify-content: space-around;}

	.align-items-start{-webkit-align-items:flex-start;align-items:flex-start;}
	.align-items-end{-webkit-align-items:flex-end;align-items:flex-end;}
	.align-items-center{-webkit-align-items:center ;align-items:center ;}
	.align-items-baseline{-webkit-align-items:baseline;align-items:baseline;}
	.align-items-stretch{-webkit-align-items:stretch;align-items:stretch;}

	.align-content-start{-webkit-align-content: flex-start;align-content: flex-start;}
	.align-content-end{-webkit-align-content: flex-end;align-content: flex-end;}
	.align-content-center{-webkit-align-content: center;align-content: center;}
	.align-content-space-between{-webkit-align-content: space-between;align-content: space-between;}
	.align-content-space-around{-webkit-align-content: space-around;align-content: space-around;}
	.align-content-stretch{-webkit-align-content: stretch;align-content: stretch;}

	.flex{
		-webkit-box-flex:1;
		-moz-box-flex:1;
		-ms-box-flex:1;
		box-flex:1;
		flex:1;
	}

	.w-300{width: 300px;}
	.w-100{width: 100px;}
	.w-50{width: 50px;}
	.h20{height: 20px;}
	.h30{height: 30px;}
	.h40{height: 40px;}
	.h50{height: 50px;}
	.bg-c{background-color: #ccc}
	.bg-red{background-color: red}
	.bg-blue{background-color: blue}
	.bg-green{background-color: green}
	.bd{border:1px solid #000;}
	section{margin-left: 20px;height: 130px;}
	section h1{color: #00a8e6;padding: 5px 0;margin:0;}
	.div{margin-bottom: 10px;}
</style>
<body>
	
	<header>
		<h1>display:flex</h1>
	</header>
	<article class="content box box-wrap" style="width: 100%">
		<section class=" bd">
			<h1>flex:1</h1>
			<div class="box w-300">
				<div class="flex bg-c">flex:1</div>
				<div class="flex bg-green">flex:1</div>
				<div class="flex bg-red">flex:1</div>
			</div>
		</section>
		<section class=" bd">
			<h1>flex-wrap</h1>
			<div class="box flex-wrap w-300">
				<div class="w-100 bg-c">1</div>
				<div class="w-100 bg-green">2</div>
				<div class="w-100 bg-green">3</div>
				<div class="w-100 bg-green">4</div>
			</div>
		</section>
		<section class="">
			<h1>flex-direction</h1>
			<div class="box flex-direction-row w-300 bd">
				<div class="w-100 bg-c">1</div>
				<div class="w-100 bg-green">2</div>
				<div class="w-100 bg-green">3</div>
				<div class="w-100 bg-green">4</div>
			</div>
			<h1>flex-direction-row-reverse</h1>
			<div class="box flex-direction-row-reverse w-300 bd">
				<div class="w-100 bg-c">1</div>
				<div class="w-100 bg-green">2</div>
				<div class="w-100 bg-green">3</div>
				<div class="w-100 bg-green">4</div>
			</div>
			<h1>flex-direction-column</h1>
			<div class="box flex-direction-column w-300 bd">
				<div class="w-100 bg-c">1</div>
				<div class="w-100 bg-green">2</div>
				<div class="w-100 bg-green">3</div>
				<div class="w-100 bg-green">4</div>
			</div>
			<h1>flex-direction-column-reverse</h1>
			<div class="box flex-direction-column-reverse w-300 bd">
				<div class="w-100 bg-c">1</div>
				<div class="w-100 bg-green">2</div>
				<div class="w-100 bg-green">3</div>
				<div class="w-100 bg-green">4</div>
			</div>
		</section>
		<section class="">
			<h1>justify-content-start</h1>
			<div class="box justify-content-start w-300">
				<div class="w-50 h30 bg-c">1</div>
				<div class="w-50 h30 bg-green">2</div>
				<div class="w-50 h30 bg-green">3</div>
				<div class="w-50 h30 bg-green">4</div>
			</div>
			<h1>justify-content-end</h1>
			<div class="box justify-content-end w-300 bd" style="height: 80px;">
				<div class="w-50 h30 bg-c">1</div>
				<div class="w-50 h30 bg-green">2</div>
				<div class="w-50 h30 bg-green">3</div>
				<div class="w-50 h30 bg-green">4</div>
			</div>
			<h1>justify-content-center</h1>
			<div class="box justify-content-center w-300 bd" style="height: 80px;">
				<div class="w-50 h30 bg-c">1</div>
				<div class="w-50 h30 bg-green">2</div>
				<div class="w-50 h30 bg-green">3</div>
				<div class="w-50 h30 bg-green">4</div>
			</div>
			<h1>justify-content-space-between</h1>
			<div class="box justify-content-space-between w-300 bd" style="height: 80px;">
				<div class="w-50 h30 bg-c">1</div>
				<div class="w-50 h30 bg-green">2</div>
				<div class="w-50 h30 bg-green">3</div>
				<div class="w-50 h30 bg-green">4</div>
			</div>
			<h1>justify-content-space-around</h1>
			<div class="box justify-content-space-around w-300 bd" style="height: 80px;">
				<div class="w-50 h30 bg-c">1</div>
				<div class="w-50 h30 bg-green">2</div>
				<div class="w-50 h30 bg-green">3</div>
				<div class="w-50 h30 bg-green">4</div>
			</div>
		</section>
		<section class="">
			<h1>align-items-start</h1>
			<div class="box align-items-start w-300 bd" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h50 bg-green">2</div>
				<div class="w-50 h30 bg-green">3</div>
				<div class="w-50 h40 bg-green">4</div>
			</div>
			<h1>align-items-end</h1>
			<div class="box align-items-end w-300 bd" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h50 bg-green">2</div>
				<div class="w-50 h40 bg-green">3</div>
				<div class="w-50 h50 bg-green">4</div>
			</div>
			<h1>align-items-center</h1>
			<div class="box align-items-center w-300 bd" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h50 bg-green">2</div>
				<div class="w-50 h40 bg-green">3</div>
				<div class="w-50 h50 bg-green">4</div>
			</div>
			<h1>align-items-baseline</h1>
			<div class="box align-items-baseline w-300 bd" style="height: 80px;">
				<div class="w-50 bg-c">1</div>
				<div class="w-50 bg-green">2</div>
				<div class="w-50 bg-green">3</div>
				<div class="w-50  bg-green">4</div>
			</div>
			<h1>align-items-stretch</h1>
			<div class="box align-items-stretch w-300 bd" style="height: 80px;">
				<div class="w-50 bg-c">1</div>
				<div class="w-50 bg-green">2</div>
				<div class="w-50 bg-green">3</div>
				<div class="w-50 bg-green">4</div>
			</div>
		</section>
		<section class="">
			<h1>align-content-start 配合 flex-wrap:wrap 使用</h1>
			<div class="box align-content-start w-300 bd flex-wrap" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h20 bg-green">2</div>
				<div class="w-50 h20 bg-green">3</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
			</div>
			<h1>align-content-end</h1>
			<div class="box align-content-end w-300 bd flex-wrap" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h20 bg-green">2</div>
				<div class="w-50 h20 bg-green">3</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
			</div>
			<h1>align-content-center</h1>
			<div class="box align-content-center w-300 bd flex-wrap" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h20 bg-green">2</div>
				<div class="w-50 h20 bg-green">3</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
			</div>
			<h1>align-content-space-between</h1>
			<div class="box align-content-space-between w-300 bd flex-wrap" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h20 bg-green">2</div>
				<div class="w-50 h20 bg-green">3</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
			</div>
			<h1>align-content-space-around</h1>
			<div class="box align-content-space-around w-300 bd flex-wrap" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h20 bg-green">2</div>
				<div class="w-50 h20 bg-green">3</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
			</div>
			<h1>align-content-stretch</h1>
			<div class="box align-content-stretch w-300 bd flex-wrap" style="height: 80px;">
				<div class="w-50 h20 bg-c">1</div>
				<div class="w-50 h20 bg-green">2</div>
				<div class="w-50 h20 bg-green">3</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
				<div class="w-50 h20 bg-green">4</div>
			</div>
		</section>
	</article>
	
	<footer>
		
	</footer>
</body>
</html>




qq_25186543
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
flex布局浏览器兼容问题
JerryChen12138的博客
12-15 3970
布局、浏览器、flex
CSS：弹性布局（display:flex）
最新发布
dsgdauigfs的博客
07-18 669
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
css浏览器兼容性
m0_73321385的博客
06-20 717
1. 使用CSS前缀：有些浏览器需要添加特定前缀才能支持某些CSS属性和值，比如-webkit-和-moz-前缀。以上仅是CSS中一些常见的属性和值在主流浏览器中的兼容性情况，实际的情况还会更加复杂，需要根据具体的需求进行兼容性处理。5. @font-face： 这个属性可以实现自定义字体的效果，不过在IE 8及以下版本中不支持该属性，需要使用其他解决方案。总之，了解浏览器兼容性，在设计和开发CSS样式时，需要尽量保证不同浏览器间的一致性，提高网站的用户体验和可访问性。
小心display:flex;这个属性，低版本的ie不支持，可能会显示不出来
weixin_34419321的博客
09-20 1202
2019独角兽企业重金招聘Python工程师标准>>> ...
flex 兼容IE8，flex兼容IE7,通过clear both清除浮动和float 实现兼容IE的flex布局
热门推荐
dcxia89的博客
03-29 1万+
  写在前面：   vue 配合 element-ui 布局时，因element布局容器默认flex布局，而ie9不兼容。为了使ie9上能良好的表现弹性布局，查找到以下博客，完美解决。xi一、float 布局float使元素脱离文档流，并且父元素内的其他的行内元素或者文本都会围绕着他放置。下面我们现写一段float的布局代码，来看一下float的作用。&lt;div class="fcont"&g...
display: flex弹性布局
10-12
display: flex弹性布局
详解css display:box 新属性
09-24
2. **box-flex: number** 这个属性定义了子元素在父元素中的弹性占比。`number`值表示子元素占据的父元素宽度的份额。如果子元素设置了固定宽度，那么这个宽度会被优先使用，其他没有固定宽度的子元素则根据`box-...
display：flex布局语法
11-20
- flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。该属性有两个快捷值auto（1 1 auto）和none（0 0 auto）。 - align-self：允许单个项目有与其他项目不一样的对齐方式...
【前端系列教程之CSS3】08_Flex布局和媒体查询
波哩个波的博客
11-30 709
CSS3从入门到精通视频直通车： CSS3从入门到精通，超多案例实践，轻松上手，通俗易懂！ 一、Flex 布局(核心) Flex 布局是什么 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: in...
CSS样式兼容各主流浏览器
weixin_43609391的博客
12-03 593
终于可以腾出时间好好整理一下我最近一段时间所遇到的难点问题 首先整理出一份css样式可以在IE8下做到兼容 1.IE8下 display：flex 不生效，需要使用float：left 2.在IE8下导出功能的接口传中文参数出现乱码情况 需求：做一个导出excle的功能 问题点：后端接收不到前端传参，前端控制台显示传的是乱码，功能不生效，使用转码属性也不生效会产生页面样式bug 解决：可以在传参之...
ie8 部分css3兼容问题处理
chenjie456789的博客
12-03 453
1.flex-direction:row; 解决办法： 在每个子级上加上float:left; 如： .wrap{ display:flex; div{ float:left; } } 2.p:nth-child(2); 解决办法： 替换成：p:first-child+p 3.border-radius:50%; 解决办法： 在服务器上安装ie-css3.htc border-radius:50%...
flex布局兼容IE10
方寸之间
02-24 1万+
在IE10浏览器中，使用flex布局的常用兼容性代码： /*display*/ .display_flex{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .display_flex > *{ display: block; } ....
干货~从实例中带你掌握flex布局
lc941015的博客
01-23 6848
（一）flex布局的兼容性 既然要用这种布局，就不得不考虑它的兼容性，先上图 从图可以看到，flex布局是不支持ie8，9的，所以建议，如果要做兼容ie8的pc端项目，还是老老实实用浮动布局吧~！但是现在是H5的时代，移动端我们还是放心大胆用吧，请抛弃恶心的清除浮动！ （二）flex布局的语法 我就不分析内主轴跟交叉轴了，有点难懂，抛开这个概念，我以我的口吻来介绍flex布局的语法
display:flex；兼容浏览器写法
weixin_44283589的博客
08-14 788
需要注意的是，这只是一个示例，实际使用时可能还需要考虑其他兼容性问题，并根据具体情况进行调整。如果你需要更全面的兼容性解决方案，建议使用 CSS 预处理器（如 Sass 或 Less）或使用相关的 CSS 库（如 Autoprefixer）来自动处理兼容性问题。
兼容ie8及现代浏览器的多种方案实现自适应布局
2401_84092903的博客
04-09 374
一、响应式布局（一）、介绍响应式布局是一种兼容pc、移动端等多种终端的样式布局。即根据屏幕的大小自适应布局，或者变化布局样式，（屏幕在拉伸时显示不同的效果比如一行布局变多行布局）。（二）、响应式布局技术。
web前端：8_flex布局
weixin_45906368的博客
07-12 87
【代码】web前端：8_flex布局。
弹性布局flex（兼容不同浏览器）
wulongren520qian的博客
11-20 9098
参考（借鉴网友和自己实现代码）：https://blog.csdn.net/u010130282/article/details/52627661 目前弹性布局比较流行使用，但是这种布局出现的时间有不同的版本  不同版本针对不同版本浏览器也就存在兼容问题 参考：http://www.webfront-js.com/articaldetail/48.html 但是更早版本的浏览器，还没有弹性布...
css display: flex;
11-14
flex: 1; height: 50px; margin: 0 10px; } ``` 在上面的例子中，我们创建了一个弹性容器，并设置了flex-direction、justify-content和align-items属性来控制子元素的排列方式和对齐方式。我们还设置了每个子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值