关于web端开发flex布局相关知识

最新推荐文章于 2024-04-30 16:59:14 发布

豁达吃早餐的LLL.

最新推荐文章于 2024-04-30 16:59:14 发布

阅读量90

点赞数 3

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_57804294/article/details/129855276

版权

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

而Flex布局，可以简便、完整、响应式地实现各种页面布局，使网页布局更加简单灵活，同时也避免了由于浮动引起的脱标问题，也是浏览器提倡的布局模型，目前已经得到了所有浏览器的支持，只是有些低版本的浏览器不可以兼容。

这里可以和大家提到一个网站：caniuse.com 可以查看哪些浏览器是支持或不支持这种技术（例如：打开网站后在搜索框输入flex 可以看到哪些浏览器版本可以兼容或者不兼容 flex 布局模式）

网站首页如下：

具体一些常用知识点夹在代码中的注释中，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 使其在一行（水平）排列 */
            /* 水平排列：默认主轴在水平，弹性盒子都是沿着主轴方向排列 */
            display: flex;

            /* 居中 */
            justify-content: center;

            /* 间距加在子集的两侧 */
            /* 视觉效果：子级之间的距离是父级两头距离的2倍 */
            justify-content:space-around;

            /* 间距加在子集中间，两头对齐 */
            justify-content: space-between;

            /* 所有地方间距相等 */
            justify-content: space-evenly;
            
            /* 侧轴：align-items 属性（添加到弹性容器中）*/
            /* 视觉效果：竖直居中 */
            align-items: center;

            /* 拉伸效果,默认值 */ 
            /* 视觉效果：沿着侧轴的主轴线铺满整个容器（如果要测试效果，需要把子级的高去掉） */
            align-items: stretch;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        /* 单独设置某个弹性盒子的侧轴对齐方式：align-self 属性 (添加到弹性盒子中) */
        .box div:nth-child(2) {
            align-self:center;
        }
        
        /***** 注：如果给宽给高，按照给的宽高，如果不给，按照内容的宽高走，如果有拉伸，会和弹性容器一样大*/
    </style>
</head>
<body>
    <div class="box">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </div>
</body>
</html>