下面小编就为大家带来一篇全面了解flex的用途。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、可以利用flex来布局一个div在另一个div里面水平垂直居中

如:html代码: 

<div>
	<div>

	</div>
	</div>

css代码:

.container{
	width:600px;
	height:400px;
	border:1px solid blue;
	display: flex;
	justify-content:center;
	align-items:center;
	}
	.box{
	width:200px;
	height:100px;
	border:1px red solid;

ps:这样就可以水平垂直居中咯

二、flex的属性

<div>
	<div>1</div>
	<div>23</div>
	<div>4</div>
	</div>

可以写在items上的属性有六个:

•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content

可以写在item上的有6个:

•order//这个就是item单独给了,要是想让那个item调换顺序就给这个属性给那个item
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self

以上就是小编为大家带来的全面了解flex的用途全部内容了,希望大家多多支持爱安网~

    无相关信息
最新资讯
美团点评股价重回发行价:临近上市1周年 市值超4000亿港元

美团点评股价重回发行

在美团点评将迎来上市一周年,及明日要公布半年报之际,美
消息称大众汽车CEO对收购特斯拉股份感兴趣

消息称大众汽车CEO对

路透社今日援引德国《经理人》杂志的报道称,大众汽车CE
蔚来9月底前裁员1200人 造车新势力如何过冬?

蔚来9月底前裁员1200

8月22日,蔚来汽车创始人李斌对全体员工下发内部信,称9月
任正非批系统部没做好不放权 称四个代表处请示太多

任正非批系统部没做好

近日,华为创始人任正非在运营商BG组织变革研讨会上表示
中兴:“130亿定增募资方案”过审 将强化5G芯片研发

中兴:“130亿定增募资

今晚,中兴通讯发布公告,关于非公开发行A股股票申请获得
vivo首款5G手机发布 称已申请超2000项5G专利

vivo首款5G手机发布

vivo今日发布了其首款5G手机IQOO Pro,售价3798元起。IQ
最新文章
HTML5 WebSocket技术使用详解

HTML5 WebSocket技术

本文为大家详细介绍了WebSocket技术使用方法,WebSocke
详解XSS 和 CSRF简述及预防措施

详解XSS 和 CSRF简述

这篇文章主要介绍了XSS 和 CSRF简述及预防措施,小编觉
详解WEB攻击之CSRF攻击与防护

详解WEB攻击之CSRF攻

这篇文章主要介绍了详解WEB攻击之CSRF攻击与防护,小编
分析攻击IP来源地与防御IP攻击的应对策略

分析攻击IP来源地与防

今天小编就为大家分享一篇关于分析攻击IP来源地并画出
文本数据的机器学习自动分类方法(下)

文本数据的机器学习自

本文为第二部分,着重介绍特征向量权重的影响因素以及样
文本数据的机器学习自动分类方法(上)

文本数据的机器学习自

本文为第一部分,着重介绍文本预处理以及特征抽取的方