CSS--flex布局与定位

flex弹性盒子布局

1. 关键词 display:flex;

我们将设置flex布局的盒子称之为容器，将容器下面的儿子（仅儿子）称之为项目；当给儿子设置flex后，它就变成了容器！

父元素=容器,子元素=项目, (默认)水平方向=主轴, (默认)垂直方向=交叉轴

当项目的宽高接近于容器的宽高并有多个项目时，设置flex会将项目挤压至适应容器宽高

除了宽会被挤压，高同样如此！

2. 所有属性属性值：

justify-content 主轴

justify-content:flex-end/end 在主轴上向右看齐

justify-content:center 在主轴上居中

justify-contnet:flex-start/start 在主轴上向左看齐

justify-content:space-around

justify-content:space-between

justify-content:space-evenly

align-content 交叉轴

align-content:flex-end/end 在交叉轴上向下看齐

align-content:center 在交叉轴上居中

align-contnet:flex-start/start 在交叉轴上向上看齐

align-content:space-around

align-content:space-between 效果与 justify-content:space-between 相同

align-content:space-evenly 效果与 justify-content:space-evenly 相同

align-items: center 再未设置换行的情况下，另项目整体居中

align-items: end 再未设置换行的情况下，另项目整体位居下

align-items: start 再未设置换行的情况下，另项目整体位居上（默认）

flex-wrap:wrap flex弹性盒子换行

注意：若要在交叉轴上操作需要换行 flex-wrap:wrap

下方图片，项目竖向排列后，align-content 的各项属性值才会生效

position 定位

相对定位 position:relative

相对于元素原位置的左上角定位

会占据原来的空间，不脱离文档流

只有定位可以使用的属性：top，left，right，bottom

如果没有top，left，right，bottom是看不出来定位的

绝对定位 position:absolute

让出原来的空间，脱离文档流

如果没有top，left，right，bottom，被定位的元素后面的元素,会往上移动

相对于页面的左上角定位的

相对于已经定位的父元素定位(子绝父相)（父相子绝）

固定定位 position:flexd

固定在原位置，滚动页面的时候元素不会随着页面滚动而移动

固定在窗口，调整位置也是调整元素在窗口上的位置

粘性定位 position:sticky

当页面滚动到设置粘性定位的元素时，元素会固定到设置的窗口位置，即使再往下滚动也不会移动

定位是有层级的，当定位的元素过多时，会让其中一个元素全部显示出来，这需要用到一个关键属性：

z-index: ; 这个属性的属性值是由数字构成

取值范围是 0 到无穷大

flex案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox{
            width: 800px;
            height: 500px;
            border: 10px solid #f00;
            display: flex;
            /* flex-wrap: wrap; */
            /* 主轴:justify-content */
            /* 交叉着:align-content */
            /* justify-content: center; */
            /* justify-content: flex-end; */
            /* justify-content: flex-start; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */
            /* align-content: center; */
            /* align-content: flex-end; */
            /* align-content: flex-start; */
            /* align-content: space-around; */
            /* align-content: space-between; */
            /* align-content: space-evenly; */
            /* align-items: center; */
            /* align-items: end; */
            /* align-items: start; */
        }
        .bigbox div{
            width: 600px;
            height:50px;
            background-color: green;
            color: #fff;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

定位案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
        div{
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .one{
            background-color: red;
        }
        .two{
            background-color: green;
            /* 
            相对定位 relative
                相对元素原位置的左上角定位
                会占据原来的空间
                只有定位可以使用的属性:top,left,right,bottom 
                如果没有top,left,right,bottom是看不出来定位的
            */
            /* position: relative; */
            /* top: 30px; */
            /* left: 30px; */

            /* 
            绝对定位 absolute
                让出原来的空间
                如果没有top,left,right,bottom,被定位的元素后面的元素,会往上移动
                相对于页面的左上角定位的
                相对于已经定位的父元素定位(子绝父相)
            */
            /* position: absolute; */
            /* top: 0px; */
            /* left: 0px; */
            /* 
            固定定位
                固定在原位置,滚动的时候元素不会随着页面滚动
                固定在窗口,调整位置也是调整元素在窗口上的位置
            */
            /* position: fixed; */
            /* right: 0; */
            /* bottom: 0; */
        }
        .three{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</body>
</html>

本文作者：五季-子琛
本文链接：https://www.cnblogs.com/izichen/articles/17763744.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @ 2023-10-14 11:19 五季-子琛阅读(777) 评论(1) 收藏举报

刷新页面返回顶部

izichen

CSS--flex布局与定位

公告