flex布局学习

最新推荐文章于 2024-05-22 19:36:03 发布

不可爱仙女

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量186

点赞数

文章标签： css flex html css3

本文链接：https://blog.csdn.net/rraxx/article/details/114285978

版权

flex布局

在这里插入图片描述

如果做PC端页面布局，我们还是传统布局。

如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

flex布局原理

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

任何一个元素都可以指定flex布局
当我们设定flex布局以后，子元素的float，clear，vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容器（flex container),简称’容器‘。它的所有子元素自动成为容器成员，称为flex项目（flex item）,简称项目。

父项常见属性

在这里插入图片描述

flex-direction 设置主轴的方向

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

在这里插入图片描述

我们的元素是跟着主轴去排列的

属性：

flex-direction: row;从左到右排列

在这里插入图片描述

flex-direction: row-reverse;从右到左排列

在这里插入图片描述

flex-direction: column;从上到下

我们可以把主轴设置为Y轴，那么x轴就成了侧轴

在这里插入图片描述

flex-direction: column-reverse;从下到上

在这里插入图片描述

    <style>
        div{
            /* 给父级添加flex属性 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是x轴  row 所以Y轴就是侧轴*/
            /* 我们的元素是跟着主轴去排列的 */
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* 我们可以把主轴设置为Y轴，那么x轴就成了侧轴 */
            flex-direction: column-reverse;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: rgb(252, 192, 115);
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

justify-content:是设置主轴上子元素的排列方式

注意：使用这个属性之前一定要确定好主轴是哪个

在这里插入图片描述

justify-content: flex-start;从头部开始

在这里插入图片描述

justify-content: flex-end;从尾部开始

只是右边对齐。但是子元素顺序不改变

在这里插入图片描述

justify-content: center;居中对齐

在这里插入图片描述

justify-content: space-around;平分剩余空间

在这里插入图片描述

justify-content: space-between;先两边贴边，再平分剩余空间

在这里插入图片描述

flex-wrap子元素是否换行

默认情况下，项目都排列在一行上，flex-wrap默认不换行。

在这里插入图片描述

align-items:设置侧轴上的子元素排列方式（单行）

在这里插入图片描述

flex-start 默认值从上到下

flex-end从下到上

center居中对齐

在这里插入图片描述

div{
            /* 给父级添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* 默认主轴是x轴 row 主轴居中对齐*/
            justify-content: center;
            /* 侧轴局中 */
            align-items: center;
}

stretch拉伸

拉伸，子盒子不要给宽度

在这里插入图片描述

div{
            /* 给父级添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* 默认主轴是x轴 row 主轴居中对齐*/
            justify-content: center;
            /* 侧轴局中 */
            align-items: center;
            /* 拉伸，子盒子不要给宽度 */
            align-items: stretch;
        }

align-content设置侧轴上子元素的排列方式（多行）

在单行下没有效果

在这里插入图片描述

    <style>
    div{
        /* 给父级添加flex属性 */
        display: flex;
        width: 600px;
        height: 400px;
        background-color: pink;
        /* 换行 */
        flex-wrap: wrap;
        /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-content */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        align-content: space-around;
    }
    div span{
        width: 150px;
        height: 100px;
        background-color: rgb(252, 192, 115);
        color: aliceblue;
        margin-right: 5px;
    }
</style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>11</span>
    <span>22</span>
    <span>33</span>
</div>

align-item,align-content的区别

在这里插入图片描述

flex-flow是flex-direction和flex-wrap的总和

<style>
        div{
            /* 给父级添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* 第一种写法 */
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把以上两句话合写 */
            flex-flow: column wrap;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: rgb(252, 192, 115);
            color: aliceblue;
            margin-right: 5px;
        }
    </style>
    </head>
    <body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>11</span>
        <span>22</span>
        <span>33</span>
    </div>

子项常见属性

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

默认为0

在这里插入图片描述

<style>
        section{
            display: flex;
            width: 60%;
            height: 150px;
            background-color: #abcdef;
            margin: 0 auto;
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: rgb(245, 213, 145);
        }
        section div:nth-child(2){
            flex: 1;
            background-color: rgb(168, 243, 154);
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: rgb(245, 145, 145);
        }
    </style>
</head>
<body>
    左侧固定，右侧固定，中间自适应
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

align-self控制子项自己在侧轴的排列方式

align-self允许单个项目和其他项目有不一样的对齐方式，可覆盖align-item属性。

默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch
在这里插入图片描述

在这里插入图片描述

 div span:nth-child(3){
            align-self: flex-end;
        }

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.

注意和z-index不一样

div span:nth-child(2){
     order: -1;
  }

在这里插入图片描述

不可爱仙女

关注

0
点赞
踩
0

收藏

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

flex布局如果做PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局flex布局原理通过给父盒子添加flex属性，来控制子盒子的位置和排列方式任何一个元素都可以指定flex布局当我们设定flex布局以后，子元素的float，clear，vertical-align属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用flex布局的元素，称为flex容器（flex container),简称’容
复制链接

扫一扫