【前言】
总结讲解下弹性盒模型布局相关知识点，为以后课件做备录。本文简单讲解下Flex布局对子元素影响
【主体】
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main_area{
width: 600px;
height: auto;
border: 1px solid red;
margin: 100px auto;
display: flex;
display: -webkit-flex; /* Safari */
}
.main_area div{
width: 200px;
height: 300px;
}
.main_area div:nth-of-type(1){
float: right;
background: red;
}
.main_area div:nth-of-type(2){
background: green;
}
.main_area div:nth-of-type(3){
background: blue;
}
</style>
</head>
<body>
<div class="main_area">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
测试后将第一个div右浮，会发现无效（弹性盒子元素无法浮动）。
.
相关推荐
Flex 弹性布局是一种基于盒模型的传统解决方案，依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素的 display 属性设置为 ...
在Flex布局中，元素的宽度和高度不再直接影响其占用的空间，而是由`flex-basis`、`flex-grow`和`flex-shrink`共同决定。 6. 响应式设计 - 结合媒体查询（Media Queries），可以根据屏幕尺寸、设备类型等条件动态...
一旦启用，容器将沿主轴（flex-direction定义的方向）和交叉轴（与主轴垂直的方向）对子元素进行布局。 1. **主要属性：** - `flex-direction`: 定义主轴方向，可以是`row`（默认，从左到右）、`row-reverse`（从...
【Flex布局】是一种现代网页设计中的布局模型，它允许开发者更灵活地控制元素在容器内的排列方式。在传统的CSS布局中，如浮动和定位，往往难以处理复杂的动态内容和响应式设计。Flex布局解决了这些问题，使得元素...
12. **CSS3弹性盒模型（Flexbox）**： - `display: flex`：启用Flexbox布局。 - `flex-direction`：定义主轴方向。 - `justify-content`：主轴上的对齐方式。 - `align-items`：侧轴上的对齐方式。 - `flex-...
4. **盒模型**：理解CSS盒模型是关键，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些都影响Div元素的实际大小和位置。 5. **浮动与清除**：浮动(float)常用于创建多列布局，但可能...
- 对子元素设置`justify-content: center;`和`align-items: center;`即可实现在容器内水平和垂直居中。 2. **Grid（网格布局）** - 使用`display: grid;`将容器设置为网格布局。 - 可以通过`place-items: center...
Flexbox（弹性盒模型）是一种用于创建响应式布局的CSS3模块。它使得在容器内对子元素进行对齐、分布和调整大小变得更加简单。主要的Flexbox属性包括： 1. `display: flex;`：将容器设置为Flex容器，开启Flex布局。 ...
Flexbox（弹性盒模型）是CSS3中的一种布局模式，专为一维布局设计，如行或列。它解决了传统布局方式在处理动态内容和响应式设计时的复杂性。Flexbox允许元素沿主轴（flex-direction）伸缩，提供了对子元素对齐、...