box flex小练习与总结

迈不过友情╰ 2021-12-20 07:37 215阅读 0赞

![2012050919563883.png][]

box-flex:新的css3属性，一种新的盒子模型——弹性盒子模型(Flexible Box Model).

使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局,哟。

第一步将父元素: display:box;这样可以开始分配盒子了。

属性值说明：

1.box-flex:用来按比例分配父标签的宽度(或高度)空间;(1:1的比例可以很和谐，数值变动就会乱套，在实际需求中可以要一个或多个固定宽度，另外的一个自适应：box-flex值为一。）

2.box-orient：用来确定子元素的方向。是横排还是竖排。

其值有：horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。（常用值为horizontal和vertical）。

3.box-direction是用来确定子元素的排列顺序。

其值有：normal | reverse | inherit

其中normal是默认值，表示按照正常顺序从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转，原本从左往右应该是1-2-3的，结果显示确实3-2-1。

4.box-align与box-pack都是决定盒子内部剩余空间怎么使用的。

其中box-align表示为横排时元素在垂直方向上的对齐方式。

其值有：start | end | center | baseline | stretch

其中其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，这点方便于自适应布局时使用。start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线对齐。

其中box-pack表示父标签有水平剩余空间时子元素的对齐方式。

其值有：start | end | center | justify

5.box-lines是用来决定子元素是否换行显示。

其值：single | multiple

实践：（想要布局成app的样子，上下两栏固定高度不动，中间内容自适应高度且有滚动条出来）。

成果：基本满足需求，后续还要多研究。

所遇故障：

1.box-flex不能在有过多文本内容的时候实现自适应比例分配。解决方案是要有一个固定的数值，剩下的box-flex：1；然后再用display：box；来继续后续的布局。

2.想要出现滚动条的地方在火狐里不出现，解决方法是在父级一样的变成display:box;

3.包裹img的div不能做到自适应宽度，不清楚原因，以后继续研究。暂时解决办法是将效果加到了img本身上面去。

4.将页面缩小时要注意浏览器本身的宽度限定，太窄了会有疑问的哇。

总结：值得后续研究。先把例子放上~~~~。

小惊喜：看到一个box-sizing的属性。好玩~~~

参考文档：

1.[http://www.zhangxinxu.com/wordpress/?p=1338][http_www.zhangxinxu.com_wordpress_p_1338] 鑫空间

2.一个参考demo http://hacks.mozilla.org/wp-content/uploads/2010/04/exemple-blog.html

1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5 <title>重设密码</title>
     6 <style type="text/css">
     7 *{
         margin:0; padding:0;}
     8 html,body{
         width:100%; height:100%;}
     9 body{
         display:-moz-box; -moz-box-orient:horizontal;}
    10 </style>
    11 </head>
    12 <body>
    13 <style>
    14 .layout{
         width:500px; height:100%; 
    15  display:-moz-box; display:-webkit-box;
    16  margin:0 auto; border:1px solid #ccc;border-top:0 none; border-bottom:0 none;
    17 -moz-webkit-orient:vertical; -webkit-box-orient:vertical;}
    18 .top{
         -webkit-box-flex:1; -moz-box-flex:1; background:#fff; overflow:auto; padding:20px;}
    19 .fixed{
         height:100px; background:#eee; text-align:center;}
    20 h4{
         color:#999; font-size:20px; border-bottom:3px solid #ccc; padding:14px;}
    21 .nav{
         margin:20px 0px;}
    22 .nav li{
         list-style:none; padding:10px; color:#ff2e00; font-size:16px;}
    23 p{
         margin:10px; border:1px dashed #ccc; border-left:0 none; border-right:0 none; padding:10px; color:#000;}
    24 .img_div{}
    25 .img_div img{
         display:block; border:0 none; padding:10px; margin:10px; border:1px solid #ccc;} 
    26 .fixed a{
         width:80px; padding:10px; background:#eee;
    27 text-align:center; color:blue; display:inline-block; margin-right:20px; margin-top:20px; border-radius:5px; border:1px solid #ccc;}
    28 .content{
         width:100%; height:100%; display:-moz-box; display:-webkit-box; -moz-box-flex:1; color:#fff;
    29 -moz-box-orient:horizontal; -webkit-box-orient:horizontal;}
    30 .mi_one{
         width:300px; background:#000;}
    31 .mi_two_con{
         -webkit-box-flex:1; -moz-box-flex:1; height:100%;}
    32 .mi_two{
         width:40%; float:left; height:100%; background:#f00;}
    33 .mi_three{
         width:60%; float:left; height:100%; background:blue; -moz-box-pack:start; display:-moz-box; display:-webkit-box;
    34 -moz-box-orient:vertical; -webkit-box-orient:vertical; -moz-box-align: stretch;}
    35 .top_fixed{
         height:50px; background:#ededed; color:#000;}
    36 .quan{
         display:-moz-box; display:-webkit-box; -webkit-box-flex:1; -moz-box-flex:1; height:100%; -webkit-box-orient:vertical; -moz-box-orient:vertical;}
    37 .quan .top{
         
    38     -moz-box-flex: 1;
    39     -moz-box-orient: vertical;
    40     display: -moz-box;}
    41 </style>
    42 
    71 <div class="quan">
    72   <div class="top_fixed">这个是头部固定高度哟!!!</div>
    73   <div class="top">
    74     <h4>这个是测试的标题</h4>
    75     <div class="nav">
    76       <ul>
    77         <li>这个是测试的列表选项</li>
    78         <li>这个是测试的列表选项</li> 
    79         <li>这个是测试的列表选项</li>
    80         <li>这个是测试的列表选项</li>
    81       </ul>
    82     </div>
    83     <p>这个是拥有边框的文字哟，顺便来个图片哇。</p>
    84     <div class="img_div"><img src="img/ceshi.jpg" width="300px" height="200px"/></div>
    85     <p>再来一段描述性的文字测试哟。哈哈~~~~</p>
    86   </div> 
    87   <div class="fixed">
    88     <a href="#">确定</a>
    89     <a href="#">取消</a>
    90   </div> 
    91 </div>
    92 </body>
    93 </html>

转载于:https://www.cnblogs.com/meimeiwa/archive/2012/05/09/box-flex.html

[2012050919563883.png]: /images/20211220/b211a6b8464740d1a7263ab6d79cf328.png
[http_www.zhangxinxu.com_wordpress_p_1338]: http://www.zhangxinxu.com/wordpress/?p=1338%C3%A9%C2%91%C2%AB%C3%A7%C2%A9%C2%BA