flex弹性布局

最新推荐文章于 2023-03-21 21:08:39 发布

Web_front

最新推荐文章于 2023-03-21 21:08:39 发布

阅读量298

点赞数 2

分类专栏：移动端

本文链接：https://blog.csdn.net/Web_front/article/details/103711207

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 传统布局与flex布局

传统布局：

兼容性好
布局繁琐
局限性，对移动端的支持不好
flex弹性布局：
操作方便，布局极简单，移动端应用广泛
PC端浏览器支持情况较差
IE11或更低版本，不支持或仅部分支持
建议：
PC端页面，使用传统布局
移动端页面或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局

2. 给父元素盒子div加入弹性布局后，子元素span的变化

2.1 父元素加入display:flex属性

在为div设置display:flex之前，span元素的display=inline
在为div设置display:flex之后，span元素的display=block，所以高度生效。
可见，通过父元素设置display:flex子元素无论原来是什么元素，都会变成block,但是宽度并不会占据父元素的100%，而且也不会独占一行
代码如下：

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

<body>
		<div>
			  <span>10</span>
			  <span>20</span>
			  <span>30</span>
		</div>
</body>

运行结果：
在这里插入图片描述

2.2 设置对齐方式

在div中加入justify-content:space-between

运行结果：
在这里插入图片描述

2.3 设置平分

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

span {
    /* width: 100px; */
    flex: 1;
    height: 100px;
    background-color: #fff;
}

此种设置，三个span元素将会平分为父元素的宽度
效果图：
在这里插入图片描述

3. 布局原理

flex：flex box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为
flex，但是我们不会变态到将 i 标签指定为 flex。
当我们将父盒子设置为flex后，子元素的float、clear、vertical-align 属性失效
采用Flex布局的元素，成为Flex容器(flex
container)，简称“容器”，它的所有子元素自动成为容器成员，成为Flex项目(flex item)，简称“项目”
子元素可以横向排列，也可以纵向排列

布局原理总结

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

Web_front

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局

1. 传统布局与flex布局传统布局：兼容性好布局繁琐局限性，对移动端的支持不好flex弹性布局：操作方便，布局极简单，移动端应用广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：PC端页面，使用传统布局移动端页面或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局2. 给父元素盒子div加入弹性布局后，...
复制链接

扫一扫