带你由浅入深的了解 flex 的基础用法

最新推荐文章于 2024-04-16 19:33:42 发布

靠技术吃饭

最新推荐文章于 2024-04-16 19:33:42 发布

阅读量1.7k

点赞数 14

本文链接：https://blog.csdn.net/weixin_58131487/article/details/119889514

版权

HTML5 同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS3

7 篇文章 0 订阅

订阅专栏

flex布局

1 篇文章 0 订阅

订阅专栏

文章目录

传统布局与flex布局的区别
一、体验 flex 布局
二、flex 布局父项常见元素
三、flex 布局子项常见元素

传统布局与flex布局的区别

传统布局	flex弹性布局
兼容性好	操作方便,布局极为简单,移动端应用很广泛
布局繁琐	PC端浏览器支持情况较差
局限性,不能在移动端很好的布局	IE 11 或更低版本,不支持或仅部分支持

建议:
1、如果是PC端页面布局,还是用传统布局
2、如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局

一、体验 flex 布局

注意:

使用 flex 布局，首先要给父级添加 flex 属性
语法：display：flex；
行内元素也可用 flex 布局，不需要转换也可设置宽度高度

代码如下（示例）：

<style>
    div {
        display: flex;     //给父级添加flex属性
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
    span {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: pink;
    }
</style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

效果如下（示例）：
在这里插入图片描述

二、flex 布局父项常见元素

1.flex-direction 设置主轴的方向

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

默认主轴的方向就是x轴方向,水平向右
默认侧轴的方向就是y轴方向,水平向下

在这里插入图片描述

注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

代码如下（示例）：

<style>
    div {
        display: flex;
        flex-direction: column;  //设置主轴的方向
        width: 500px;
        height: 300px;
        background-color: skyblue;
        
    }
    span {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: pink;
    }
</style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

效果如下（示例）：
在这里插入图片描述

2.justify-content 设置主轴上的元素排列方式

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

属性值	说明
flex-start	默认值从头部开始,如果主轴是x轴,则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边,再平分剩余空间(重要)

代码如下（示例）：

div {
        display: flex;
        justify-content: space-around;    //平分剩余空间
        justify-content: space-between;    //先两边贴边,再平分剩余空间
        width: 500px;
        height: 300px;
        background-color: skyblue;
        
    }
    span {
        width: 100px;
        height: 100px;
        margin: 10px 0;   //设置了上下10px的外边距
        background-color: pink;
    }
</style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

space-around 平分剩余空间效果如下（示例）：
在这里插入图片描述
space-between 先两边贴边,再平分剩余空间效果如下（示例）：

在这里插入图片描述

3.flex-wrap 设置子元素是否换行

注意:默认情况下,项目都排在一条线(又称"轴线"上),默认不换行

属性值	说明
nowrap	默认值,不换行
wrap	换行

代码如下（示例）：

<style>
    div {
        display: flex;
        flex-wrap: wrap;    //换行显示
        width: 500px;
        height: 300px;
        background-color: skyblue;
        
    }
    span {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: pink;
    }
</style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

默认不换行效果如下（示例）：
在这里插入图片描述
换行效果如下（示例）：

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

该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项的时候使用

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸

代码如下（示例）：

<style>
    div {
        display: flex;
        /* align-items: center; */   //侧轴上居中显示
        align-items: stretch;    //侧轴上拉伸显示，设置时不给span盒子高度
        width: 500px;
        height: 300px;
        background-color: skyblue;
        
    }
    span {
        width: 100px;
        /* height: 100px; */
        margin: 10px;
        background-color: pink;
    }
</style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

侧轴上居中显示效果如下（示例）：
在这里插入图片描述

侧轴上拉伸显示效果如下（示例）：
在这里插入图片描述

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

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

代码如下（示例）：

        align-content: flex-start;
        align-content: flex-end;
        align-content: center;
        align-content: space-around;
        align-content: space-between;
        align-content: stretch;

多行排列的六种显示效果如下（示例）：
在这里插入图片描述

6.algin-content和algin-items的区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-items 多行找 align-content

flex-flow 设置主轴方向和是否换行的复合性写法（示例）：

flex-flow: row wrap;（主轴：X 换行）

三、flex 布局子项常见元素

1. flex: number;

语法如下（示例）：

flex: 数字;（默认为0）
/*还可以写百分比，相对于父亲来说的（占父亲宽度的百分之二十）*/
例如：flex：20%；

2.flex-basis: number;

flex-basis 的尺寸是作用在 content-box 是上的，flex-basis 与 width 属性在
content-box 上的作用一样的，在外部尺寸够大，内容尺寸够小的情况下，两者的表现是一样的
width 的尺寸是作用在 border-box 上时，两者的表现根据 content 内容（min-content 最小宽度）决定的。flex-basis 设置宽度时，就是由内容（min-content 最小宽度）决定的；而 width 是的宽由内容+内边距+边框组成的。
当 width 和 flex-basis 同时书写时 flex-basis 有效，flex-basis 在伸缩布局的情况下优先级高于
width。
flex-basis ：auto；(默认值）
子项的尺寸是由自身的尺寸决。自身尺寸： box-sizing、width/min-width/max-width、content内容(min-width 最小宽度)

3.flex-grow: number;

当里面子元素的宽度加起来小于父元素的宽度的情况下使用此属性。

把父级剩余的空间按照特定的比例进行划分，里面的数字越大，分到的空间就越多

默认值 0 （不会分配剩余的空间）

数值：为占比

小数：总数小于1，没有把所有空间分配给子元素

4.flex-shrink: number;

当里面的子元素的宽度加起来超过了父级元素的宽度时，溢出部分按照特定的比例进行划分压缩
给每个子元素添加 flex-shrink，就是按照我们指定的比例压缩
默认值是 1，如果是 0 就不压缩
小数：总数小于1
压缩率：每个元素的加权值（flex-shrink*width）/加权总和
加权总和：每个元素的宽度*flex-shrink 的值的和

靠技术吃饭

关注

14
点赞
踩
10

收藏

觉得还不错? 一键收藏
18
评论
带你由浅入深的了解 flex 的基础用法

文章目录传统布局与flex布局的区别一、体验 flex 布局二、flex 布局父项常见元素1.flex-direction 设置主轴的方向2.justify-content 设置主轴上的元素排列方式3.flex-wrap 设置子元素是否换行4.align-items 设置侧轴上的子元素排列方式（单行）5.align-content 设置侧轴上的子元素排列方式（多行）6.algin-content和algin-items的区别三、flex 布局子项常见元素1. flex: number;2.flex-basi
复制链接

扫一扫