当前位置：首页 > 资讯 > 技术文档

全面了解flex的用途

时间：2021-05-10 03:13 编辑：来源：阅读：
扫一扫，手机访问

摘要：全面了解flex的用途

[b]一、可以利用flex来布局一个div在另一个div里面水平垂直居中[/b] 如：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:这样就可以水平垂直居中咯 [b]二、flex的属性[/b]

<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)

上一篇：Flex 事件分发(FlexViewer事件机制)剥离过程
下一篇：Flex Label控件竖排显示文字的实现代码

资讯排行榜
更多>>