css3流式布局
css3布局⽅式：
不推荐使⽤float，有时候使⽤浮动的时候，对于可适应的流⽒布局,⽆法胜任。 推荐使⽤css3的display:webkit-box。
使⽤的html代码
<div class="warp">              <div class="one"> </div>              <div class="two"></div>              <div class="three"></div>          </div>
box-flex属性
box-flex主要让⼦容器针对⽗容器的宽度按⼀定规则进⾏划分
最重要的⼀个特性是：如果⼦元素中有固定的宽度，其他没有设置宽度的则在 ⽗元素的基础上减去⼦元素的宽度，再按照⽐例划分。
css代码
.
flex布局对齐方式warp{display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}    .one{height:80px;width:80px;background:#FFA600;}    .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}    .three{height:80px;width:80px;background:#028002;}
box-orient属性
⽤来确定⽗容器⾥⼦容器的排列⽅式，是⽔平还是垂直;
⽔平排列 box-orient:horizontal
css代码
.warp{-webkit-box-orient: horizontal;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}
.one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}
.three{height:80px;width:80px;background:#028002;}
垂直排列 box-orient:vertical
css代码
.warp{-webkit-box-orient: vertical;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}
.one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}
.three{height:80px;width:80px;background:#028002;}
box-align属性
box-align表⽰⽗容器⾥⾯⼦容器的垂直对齐⽅式，可选参数如下所⽰： start | end | center | baseline | stretch。
居顶对齐 start
css代码
.warp{-webkit-box-align: start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}
.one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}
.three{height:80px;width:80px;background:#028002;}
垂直排列 end
css代码
.warp{-webkit-box-align: end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}
.
one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}
.three{height:80px;width:80px;background:#028002;}
垂直排列 center
css代码
.warp{-webkit-box-align: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}  .one{height:80px;width:80px;background:#FFA600;}  .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}  .three{height:80px;width:80px;background:#028002;}
垂直排列 stretch
css代码
.warp{-webkit-box-align: stretch;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}  .one{width:80px;background:#FFA600;}  .two{-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}  .three{width:80px;background:#028002;}
但是需要注意的是：如果⼦元素的⾼度已经设置啦height:20px就不会⾃动的拉伸。
box-pack属性
box-pack表⽰⽗容器⾥⾯⼦容器的⽔平对齐⽅式，可选参数如下所⽰： start | end | center | justify
⽔平居左对齐 start
css代码
.warp{-webkit-box-pack: start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}
.one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}
.three{height:80px;width:80px;background:#028002;}
box-pack表⽰⽔平居右对齐 end
css代码
.warp{-webkit-box-pack: end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}  .one{height:80px;width:80px;background:#FFA600;}  .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}  .three{height:80px;width:80px;background:#028002;}
box-pack 表⽰⽔平居中对齐 center
css代码
.warp{-webkit-box-pack: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}  .one{height:80px;width:80px;background:#FFA600;}  .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}  .three{height:80px;width:80px;background:#028002;}
box-pack 表⽰⽔平居中对齐 justify
css代码
.warp{-webkit-box-pack: justify;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}  .one{height:80px;width:80px;background:#FFA600;}  .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}  .three{height:80px;width:80px;background:#028002;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。