flex弹性布局_div flex 布局 宽度为内容宽度

1. 传统布局和flex布局

1.1 传统布局

• 兼容性好
• 布局繁琐
• 局限性，对移动端的支持不好

1.2 flex弹性布局

• 操作方便，布局极为简单，移动端应用广泛
• PC段浏览器支持情况较差
• IE11或更低版本，不支持或部分支持

建议：

• PC端页面，使用传统布局
• 移动端页面或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局

2. 体验flex弹性布局带来的变化

html 代码

<div>
    <span>10</span>
    <span>20</span>
    <span>30</span>
</div>
1
2
3
4
5

css 代码

<

style>
body {
    background-color: #ccc;
}
div{
    width: 80%;
    height: 200px;
    background-color: #000;
}
span{
    height: 100px;
    background-color: #fff;
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果图

加入flex

为 div 加入如下 css 样式

效果图

总结

• 在为div设置 display：flex之前，span元素的display=inline
• 在为div设置 display：flex之后，span 元素的display=block，所以高度生效，但是因为宽度没有设置，固为内容宽度
• 可见，通过为父元素设置display：flex 子元素无论原来是什么元素，都会变成block，但是宽度并不会占据父元素100%，而且也不会独占1行

设置固定宽度
可以为span元素设置宽度

span{
    width: 100px;
    height: 100px;
    background-color: #fff;
}
1
2
3
4
5

设置后，宽度会生效，但是，当调整浏览器宽度，默认情况下，span的宽度仍然会压缩

设置对齐方式
在div中加入如下代码

效果图

设置评分
也可以不设置固定宽度，而是使用如下代码

span {
    /* width: 100px; */
    flex: 1;
    height: 100px;
    background-color: #fff;
}
1
2
3
4
5
6

此种设置三个span元素将会评分父元素的宽度

3. 布局原理

flex：flex box 的缩写

意为 弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex，但是我们不会变态到将 i 标签指定为 flex

当我们将父盒子设置为flex后，子元素的float、clear、vertical-align 属性失效

采用Flex布局的元素，成为Flex容器(flex container)，简称“容器”，它的所有子元素自动成为容器成员，成为Flex项目(flex item)，简称“项目”

子元素可以横向排列，也可以纵向排列

布局原理总结

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式