div自由布局方法：
1：使用overflow:auto.
2：使用flex
具体请运行下方代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.flex-box{
overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
width: 100%; height: 300px;
margin: 0 auto;
color: #fff;
text-align: center;
font-family: 'Microsoft YaHei';
}
.flex1{
width: 20%; height: 100%;
background: #ff8989;
display: block;
}
.flex2{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
background: #1bbc9b;
}
.flex3{
width: 100px; height: 100%;
background: #516d81;
}
.flex-box1{
overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-flow:column;
-webkit-box-orient: horizontal;
width: 1000px; height: 500px;
margin: 0 auto;
color: #fff;
text-align: center;
font-family: 'Microsoft YaHei';
}
.flex4{
height: 20%;
background: #ff8989;
display: block;
}
.flex5{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
background: #1bbc9b;
}
.flex6{
height: 200px;
background: #516d81;
}
.over_style{
height:100px;
}
.left{
height:100%;
width:20%;
float:left;
background-color:#FF0000;
}
.right{
height:100%;
width:200px;
float:right;
background-color:#00FF00;
}
.center{
height:100%;
overflow:auto;
background-color:#0000FF;
}
</style>
<body>
<p>你可以改变屏幕宽度查看效果</p><br><br>
<p>flex宽度自适应</p>
<div class="flex-box">
<div class="flex1">flex1 <br> 我的宽度为父级的20%；</div>
<div class="flex2">flex2 <br> 我的宽度为父级宽-(flex1+flex3)；</div>
<div class="flex3">flex3 <br> 我的宽度为父级的20%；</div>
</div>
<br><br><br><br>
<p>overflow自适应</p>
<div class="over_style">
<div class="left">left <br> 我的宽度为父级的20%；</div>
<div class="right">right <br> 我的宽度为200px；</div>
<div class="center">center <br> 我的宽度为父级宽-(flex1+flex3)；</div>
</div>
<br><br><br><br>
<p>flex高度自适应</p>
<div class="flex-box1">
<div class="flex4">flex1 <br> 我的高度为父级的20%；</div>
<div class="flex5">flex2 <br> 我的高度为父级高-(flex1+flex3)；</div>
<div class="flex6">flex3 <br> 我的高度为定高200px；</div>
</div>
</body>
</html>
分享到：
相关推荐
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
内容概要：本文深入讲解了CSS Flex布局...阅读建议：由于涉及较多CSS的具体操作细节与实践应用案例，阅读本文之前最好具备一定的CSS基础知识。为了更好地理解和掌握Flex布局，推荐跟随示例亲手进行代码实践以加深理解。
`Flex3StyleExplorer`可能是这样一个工具，它可能是一个应用程序或者一个开发插件，能够帮助用户探索、设计并自动创建适用于Flex3应用的CSS样式代码。 Flex3中的CSS支持包括但不限于以下方面： 1. **组件样式**: ...
Flex CSS设计器是一款基于Flash技术的工具，专门用于帮助开发者对Flex应用程序中的用户界面控件进行CSS样式设计。这款工具提供了一个可视化的环境，使得设计师和开发者能够更直观、便捷地调整Flex控件的外观和布局，...
本资源“css3_flex使用示例”包含了一些关于CSS3 Flexbox的实际应用案例，帮助开发者深入理解和掌握这一强大的布局工具。 1. **Flex容器与项目** - **flex容器**：设置`display`属性为`flex`或`inline-flex`的元素...
总结，《Flex_Css完全手册》涵盖了Flex与CSS的深度整合，是Web开发者的必备参考资料，无论你是初学者还是经验丰富的开发者，都能从中获得宝贵的知识和技巧，提升你的Flex应用开发能力。通过实践和探索，你可以利用...
1. CSS样式表引入：Flex应用中的CSS样式表可以通过`<style>`标签或者链接外部样式表（`.css`文件）的方式引入。在MXML文件中，可以使用`<mx:Style>`标签来包含内联样式。 2. 样式类（Style Class）：Flex中的组件...
这个项目可能包括一个Flex应用程序文件（如.mxml）、一个CSS文件和可能的其他资源文件。通过导入并运行这个项目，你可以直观地了解Flex CSS皮肤的工作原理和实际效果。 在实践中，你可以通过调整CSS的属性值，尝试...
- CSS样式表用于定义Flex应用中UI组件的外观，包括颜色、字体、边框、间距等属性。 - 使用`<style>`标签或外部样式表文件（.css）导入到Flex项目中。 2. **命名空间和类选择器** - Flex CSS需要指定命名空间，...
### Flex3中应用CSS完全详解 #### 一、使用本地样式定义 在Flex3中，开发者可以通过使用`<mx:Style>`标签在MXML文件中创建本地的样式...通过这些方法，开发者可以根据项目需求灵活地调整和定制Flex应用的界面样式。
在"使用CSS美化Flex实例"文件中，你将看到各种CSS技巧在Flex布局中的应用。例如，通过调整`flex-wrap`属性实现换行布局，通过`align-self`让特定子元素独立对齐，以及使用`align-content: space-around`在多行Flex...
文档旨在为开发者提供关于Flex和CSS的全面理解，帮助他们更好地掌握网页和应用的现代布局技巧。 Flex布局，全称为Flexible Box布局，是CSS3中的一项重要布局模型，专门设计来解决复杂的网页和用户界面的布局问题。...
总之，Flex布局动画主要依赖于CSS的`transition`和`animation`属性，它们能帮助我们在Flex元素变化时创建流畅的过渡效果。通过实践和调试，开发者可以创造出各种各样的动态Flex布局，提升网站的视觉吸引力和用户体验...
在实际应用中，Flex CSS样式可以应用于各种类型的网站和应用，无论是在桌面端还是移动端，都能提供优秀的响应式表现。对于那些需要频繁调整和迭代界面设计的项目，Flex样式生成工具无疑是提高开发效率的利器。 总的...
"flex 皮肤样式css+style"这个主题聚焦于如何利用CSS（层叠样式表）技术为Flex应用创建美观且统一的皮肤。Flex是一种用于构建富互联网应用程序（RIA）的框架，它基于ActionScript和Flash技术，允许开发者创建具有...
VistaRemix flex css 皮肤是一种专为Flex应用程序设计的用户界面皮肤，它基于CSS（层叠样式表）技术，提供了美观且响应式的界面样式。Flex是一个由Adobe开发的开源框架，主要用于创建富互联网应用程序（RIA）。这款...
### Flex中的CSS样式详解 Flex是一种用于开发交互式应用程序的框架，它...通过灵活运用本地样式、外部样式表、内联样式以及ActionScript中的`setStyle()`方法，开发者可以在Flex应用程序中实现高度个性化的UI设计。
Flex CSSLoader是一个关键的技术，它允许开发者在Flex应用程序运行时动态加载CSS文件，极大地提高了应用的灵活性和可扩展性。这个技术主要应用于Flex项目，它是一个基于ActionScript 3.0的框架，用于构建富互联网...
Flex布局，全称为“Flexible Box”，也被称为Flexbox，是一种用于网页布局的CSS3模块，旨在提供更加灵活、响应式的布局方案。它允许开发者轻松地调整元素在容器内的排列方式，适应不同屏幕尺寸和设备类型。在现代...
Flex CSS 模板经典是网页布局设计中的一个重要概念，它为开发者提供了强大的工具来构建响应式、灵活且可自适应的网页布局。Flexbox（ Flexible Box 或 Flex 布局）是CSS3的一个模块，旨在解决传统布局模式在处理动态...