CSS之flex布局

发布时间:2017-1-16 20:55:36 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"CSS之flex布局 ",主要涉及到CSS之flex布局 方面的内容,对于CSS之flex布局 感兴趣的同学可以参考一下。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>    <div class="box">    <div class="item item1">1</div>    <div class="item item2">2</div>    <div class="item item3">3</div>        <div class="item item4">-1</div>    <div class="item item5">-3</div>    <div class="item item6">0</div>  </div>  <span class="test"></span></body></html>
.box {  width:400px;  height:104px;  border: 1px solid #000000;  display: -webkit-flex;  display: flex;  /*float, clear, vertical-align失效*/  /*  flex-direction: row;  flex-wrap: wrap;  */  /*flex-flow是上面两个的合体*/  flex-flow: row wrap;  /*主轴*/  justify-content: space-around;  /*交叉轴*/  align-items: center;  /*多轴*/  align-content: center;}.box .item {  width: 50px;  height: 50px;  border:1px solid pink;  font-size: 16px;  order:2;  /*空间不够的时候,项目等比缩小*/  flex-shrink: 1;}.box .item3 {  /*占据两份*/  flex-grow: 2;  align-self: flex-end;}.test {  /*内联元素也可以做flex布局*/  display: -webkit-inline-flex;  display: inline-flex;}

运行结果:

上一篇:Java中并发问题整理
下一篇:线程同步辅助类CyclicBarrier

相关文章

关键词: CSS之flex布局

相关评论