移动端页面制作之flex弹性布局

最新推荐文章于 2024-04-10 10:17:20 发布

代森森

最新推荐文章于 2024-04-10 10:17:20 发布

阅读量423

点赞数 5

分类专栏：个人笔记文章标签： css html css3

本文链接：https://blog.csdn.net/ovocc/article/details/121397166

版权

前言

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

原理
父盒子常见属性
子盒子常见属性
- flex
- align-self
- order

原理

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

采用flex布局的元素，称为flex容器，简称容器。他的所有子元素自动成为容器成员，称为flex项目，简称项目

    <style>
        div {
     
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        
        div span {
     
            width: 150px;
            height: 100px;
            background-color: rgb(212, 192, 255);
            margin-right: 5px;
            flex: 1;
        }
    </style>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span

最低0.47元/天解锁文章

代森森

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
移动端页面制作之flex弹性布局

前言 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。原理二级目录三级目录原理通过给父盒子添加flex
复制链接

扫一扫