弹性布局是真的牛批！！！！

最新推荐文章于 2024-06-10 17:18:33 发布

诚实可靠小郎君~

最新推荐文章于 2024-06-10 17:18:33 发布

阅读量177

点赞数 1

分类专栏：前端文章标签： html flex

本文链接：https://blog.csdn.net/weixin_39671853/article/details/115096813

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flex布局

弹性布局：当页面缩小时，页面元素不会发生换行，始终随着页面的变小而观感上变窄，但是元素内容始终存在，不会出现布局混乱的情况。简之，不管页面如何放大或者缩小，页内元素都不会乱跑！！！
在这里插入图片描述

详述

父级叫做弹性容器—>相当于平面布局时的边框
子级叫做弹性元素—>相当于平面布局时的框中内容

轴的概念
主轴：电脑屏幕的长
交叉轴：电脑屏幕的宽

下面七种样式都是在父级容器（弹性容器）里面设置的：
1.定义弹性盒子
display：flex

2.用于控制弹性盒子里面的弹性元素排列的方向
flex-direction：
row从左到右 row-reverse从右到左 column从上到下 column-reverse从下到上

3.规定是单行还是多行：
flex-wrap：
nowrap 默认元素不拆行或不拆列
wrap 必要的时候拆行或拆列
wrap-reverse 必要的时候拆行或拆列，但是拆的方向是相反的

4.flex-flow：
flex-wrap和direction的结合体

5.控制元素在主轴上的排列方式
justify-content ：
flex-start 紧靠开头
flex-end 紧靠结尾
center 居中
space-between 第一个元素紧靠起点第二个元素紧靠终点其他空间由其他元素平均分配
space-around 每个元素两侧的间距相等
space-evenly 元素间距距离平均分配

6.控制元素在交叉轴上的排列方式
align-items：
stretch 元素被拉伸以适应容器（没有设置固定的行高或者大于高度字体大小）
center 位于容器的中心
flex-start 紧靠交叉轴的开头
flex-end 紧靠交叉轴的结尾

7.适用于多行用于控制行而不是元素在交叉轴的排列方式
align-content
flex-start 每一行紧靠交叉轴开始位置
flex-end 每一行紧靠交叉轴的结束位置
center 居中紧靠交叉轴的中间位置
space-between 第一行紧靠起点最后一行紧靠终点其他空间由其他行平均分配
space-around 每行两侧的间距相等
space-evenly 每行间距距离平均分配

下面的都是在弹性元素里面的写的
放在弹性的盒子里面的元素都叫弹性元素
注意：不用使用float和clear规则
弹性元素都为块级元素
绝对定位不参与弹性布局

1.align-self
用来设置单个元素在交叉轴的排列方式
stretch 默认方式平均分配
flex-start 单个元素紧靠交叉轴的开始位置
flex-end center
2.flex-grow
用于将弹性盒子的可用空间，分配给弹性元素
3.flex-shrink
装不下的时候定义的缩小值 0 1 2 3 …
3.flex-basis
定在了在在分配多余空间之间项目占据的主轴空间
优先级更高的width
4.order
调整元素的位置

接触某部分使其背景变色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景特效</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* 将整个页面设为弹性布局 */
        body{
            display: flex;
             /* 元素在主轴（屏幕长）和交叉轴（屏幕宽）上居中 */
             /*屏幕居中  */
            justify-content: center;
            align-items: center;
        }
        .box_out{
            width: 1200px;
            display: flex;
             /* 元素平均分配 */
            justify-content: space-between;
            margin-top: 15%;
        }
        .box_out .box{
            position: relative;
            /* 改变堆叠元素顺序 */
            z-index: 1;
            width: 360px;
            background-color: #fff;
            overflow: hidden;
             /* 改变盒子大小,使内部的元素与其边框产生距离相等 */
            box-sizing: border-box;
            padding: 30px;
            box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.2);
        }
        .box_out .box:hover{
            box-shadow: -20px 50px 100px rgba(0, 0, 0, 0.5);
        }

         /* 将背景颜色拉伸充满全屏*/
        .box_out .bg{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
        .box1:hover~.bg,.box1:hover{
            opacity: 1;
            background-image: linear-gradient(pink,black);
        }
        .box2:hover~.bg,.box2:hover{
            opacity: 1;
            background-image: linear-gradient(yellow,green);
        }
        .box3:hover~.bg,.box3:hover{
            opacity: 1;
            background-image: linear-gradient(yellowgreen,blue);
        }
    </style>
</head>
<body>
    <div class="box_out">
        <div>
            <div class="box box1">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Deserunt odio magni ducimus optio quidem dignissimos 
                    temporibus quae veritatis 
                    velit dolorum officiis ex natus labore nemo consequuntur 
                    obcaecati dolore, incidunt qui!
                </p>
                <h2>Somedolore</h2>
            </div>
            <div class="bg"></div>
        </div>
        <div>
            <div class="box box2">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Deserunt odio magni ducimus optio quidem dignissimos 
                    temporibus quae veritatis 
                    velit dolorum officiis ex natus labore nemo consequuntur 
                    obcaecati dolore, incidunt qui!
                </p>
                <h2>Somedolore</h2>
            </div>
            <div class="bg"></div>
        </div>
        <div>
            <div class="box box3">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Deserunt odio magni ducimus optio quidem dignissimos 
                    temporibus quae veritatis 
                    velit dolorum officiis ex natus labore nemo consequuntur 
                    obcaecati dolore, incidunt qui!
                </p>
                <h2>Somedolore</h2>
            </div>
            <div class="bg"></div>
        </div>
    </div>
</body>
</html>

诚实可靠小郎君~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性布局是真的牛批！！！！

flex布局弹性布局：当页面缩小时，页面元素不会发生换行，始终随着页面的变小而观感上变窄，但是元素内容始终存在，不会出现布局混乱的情况。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示；增加了图片拖拽功能，你可以将本地的图片直接拖拽到编辑区域直接展示；全新的
复制链接

扫一扫