flex布局

最新推荐文章于 2024-06-12 16:49:26 发布

hbase丶

最新推荐文章于 2024-06-12 16:49:26 发布

阅读量185

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/weixin_48609908/article/details/123739591

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

传统布局 vs flex布局

传统布局无论是浮动布局还是定位布局，在pc端兼容性较好，但是对移动端的兼容性就特别差，同时在改变屏幕大小的时候，传统的布局方式也是兼容性不强，而且布局也不容易操作，所以这里引入一个flex弹性布局，还有一个更强大的grid网格布局。

1、flex布局

flex布局中的排序方式，是以主轴的为准，比如：我们说的x轴，也就是水平轴，就是flex默认的主轴，看代码：

这是页面展示的主题部分


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

（1）样式一：默认值主轴排序

<style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴 x轴 行 row  剩下的就是侧轴*/
            /* 元素是跟着主轴布局的 */
            flex-direction: row;
            /*
                可选valaue：
                1、row 水平轴
                2、row-reverse 水平翻转轴
                3、column 垂直轴
                4、column-reverse 垂直翻转轴
            */
        }
        /* 父下的子项，就能被父操控 */
        div span{
            width: 150px;
            height: 100px;
            background-color: gray;
        }
    </style>

（1.1）默认的：row

（1.2） row-reverse 水平翻转轴

（1.3）column 垂直轴

（1.4）column-reverse 垂直翻转轴

（2）样式二：主轴为row（水平轴），子元素对齐方式，将主轴设置为column也是一样的操作

<style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认主轴 x */
            /* 设置主轴上子元素的排列 */
            /* justify-content: flex-start; 默认的 */
            /* justify-content: flex-end; 从右到左贴齐，顺序不变 */
            /* justify-content: center; 居中对齐 */
            /* justify-content: space-around; 平分剩余空间 */
            /* justify-content: space-between; 先两边贴边，再平分剩余空间 */
        }

        div span{
            width: 150px;
            height: 100px;
            background-color: gray;
        }
    </style>


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

（2.1） justify-content: flex-start 效果图

（2.2）justify-content: flex-end 效果图

（2.3） justify-content: center 效果图

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

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

（3）在flex布局中，默认是不会换行的，只会将其他元素继续缩小：flex-wrap: wrap;设置当子元素的宽和大于父元素的宽，换行

（4）在主轴确定的情况下，对侧轴进行操作（align-items只能对单行操作）

<style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是x */
            justify-content: center;
            /* 侧轴居中， 主轴摆放位置的value，侧轴的都有 */
            align-items: center;
            /* 独有的 拉伸  子盒子不要有高度*/
            /* align-items: stretch; */
            /* flex-direction: column; */
        }

        div span{
            width: 150px;
            height: 100px;
            background-color: gray;
            color: white;
            margin: 10px;
        }
    </style>

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

（4.1）justify-content: center; align-items: center; 垂直水平居中

（4.2）拉伸：子元素不能有高度，让程序自动拉长 justify-content: center; align-items: stretch;

（5）对侧轴的多行操作，必须得设置允许换行

<style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap; /* 设置了可换行，就可以使用align-content */
            /* 因为有了换行，所以侧轴对齐方式，我们用align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between;  先布上下两地，剩下的空间再平均分配*/
            /* align-content: space-around; 全部上下平分空间 */
        }

        div span{
            width: 150px;
            height: 100px;
            background-color: gray;
            color: white;
            margin: 10px;
        }
    </style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

（5.1）align-content: flex-start; 居上

（5.2） align-content: center; 居中

（5.3）align-content: flex-end; 居下

（5.4）align-content: space-between; 先布上下两地，剩下的空间再平均分配

（5.5）align-content: space-around; 全部上下平分空间

（6）flex-flow: column wrap; /* 可以同时设置主轴方向，是否换行 */

（7）份数：flex能自动根据设置的数字，进行进行平均多少份，哪个元素占多少份数

<style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            /* flex分配剩余空间的份数 */
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }


        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }

    </style>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

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

（8）align-self：指定的子项，独自进行的操作

order：控制子项排序的位置，默认最开始的位置是0 越小越靠前

<style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 会让3个子盒子沿侧轴低对齐 */
            /* align-items: flex-end; */
            /* 让3号盒子自己下来 */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(2) {
            /* 控制子项排序的位置， 默认最开始的位置是0 越小越靠前 */
            order: -1;
        }

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

    </style>


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