源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

全面了解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)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部