（box-flex） webapp开发信息流的一种方式

小怪

于 2016-04-20 12:03:58 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： web app css box-flex

本文链接：https://blog.youkuaiyun.com/pjwan/article/details/51199611

web app 同时被 3 个专栏收录

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

box-flex

1 篇文章

订阅专栏

本文介绍 CSS 中的 box-flex 属性，展示了如何使用该属性实现弹性盒子布局，并提供了简单的 HTML 示例代码。通过调整 box-flex 的值，可以轻松地改变元素在容器中的分布方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-flex</title>
</head>
<body>


<style>
*{padding: 0;margin: 0}
.test_box { 
width: 800px;
margin:0 auto;
    text-align: center;


    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
 }
.list{height: 100px;color: #fff}


.list_one{
    background: blue;
    width: 200px;
}


.list_two { 
    background: red;
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}
 
</style>
<div class="test_box">
        <div class="list list_one">img</div> 
        <div class="list list_two">content</div> 
    </div>
</body>
</html>

更多相关信息：

http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex属性，然后弹性盒子模型简介/