当前位置: 代码网 > it编程>网页制作>Flex > 全面了解flex的用途

全面了解flex的用途

2024年05月15日 Flex 我要评论
一、可以利用flex来布局一个div在另一个div里面水平垂直居中如:html代码: <div class="container"><div class="box"></

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

如:html代码: 

<div class="container">
	<div class="box">

	</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 class="items">
	<div class="item">1</div>
	<div class="item">23</div>
	<div class="item">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的用途全部内容了,希望大家多多支持代码网~

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com