前端-flex弹性布局笔记

最新推荐文章于 2024-11-11 09:45:18 发布

CodeCxil

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量291

点赞数 1

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

本文链接：https://blog.csdn.net/qq_41098074/article/details/126725169

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.基本概念。

什么是Flex？

flex全称是flexiblebox既弹性盒子，用来进行弹性布局，弹性布局也是目前应用最广泛的布局。

优点：

1.可以为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

2.跟家符合响应式设计的特点，方便页面在不同设备上的布局显示。

flex-direction属性用法及属性值。

row ：默认值，按从左到右的顺序显示。

row-reverse：与row，但是以相反的顺序进行排列的

column：将项目垂直显示，按照从上到下的顺序。

column-reverse ：与column，相同，但是以相反的顺序排列。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 500px;
            background: green;
            display: flex;
            flex-direction: row;
        }
        .div1 div {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

2.当内嵌的盒子超出最外层大盒子的宽度时，会挤压离着边最近的盒子。

也就是子元素的宽度大于外部盒子宽度时，flex布局辉自动压缩子元素以适应外部盒子大小。

3.flex-wrap属性的用法！

属性：

nowrap：默认值，不换行，列

wrap：换行，列

wap-reverse：换行或者换列，但是里面盒子的顺序会变成相反的方向排列。

注：同时用换行可以对上面子盒子被挤压的情况进行解决。

4.justify-content属性的用法

该属性类似text-align属性

属性值：

flex-start 默认值，从左到右，顺序排列

flex-end ：从右到左，顺序排列

center：居中显示

space-between 平均分布在该行上，紧贴两边，不留间隔

space-around：平均分布该行，两边留有一半的间隔空间

5.align-items属性

该属性类似line-height 行高实现垂直居中对其的效果。

属性值：

flex-start 位于顶部也就是外层容器的开头。

flex-start 位于底部，也就是容器的结尾。

center 居中显示

6.针对flex布局子对象属性

flex-basis 设置弹性盒子的伸缩基准值

flex-grow 设置弹性盒子的扩展比列

flex-shrink 设置盒子的缩小比例设置后超出父盒子的范围的子盒子不会缩小压缩

flex ：以上属性缩写

flex-grow 属性

首先我们设置了第一个子盒子的flex-grow: 1;第二个盒子的flex-grow: 3;，这个意思是：将剩余的空间分成1+3份，第一个子盒子占1份，第二个子盒子占3份。
剩余空间：父盒子宽度-子盒子宽度=400 - (50+100)=250px
每一份宽度：250/4=62.5px
第一个子盒子占一份：50+62.5=112.5px
第二个子盒子占三份：100+62.5*3=287.5px

7.flex布局盒子对象属性的集中简写

flex:auto;

flex:none;

flex:0%
flex:100px

flex:1;