十五、flex弹性元素的样式

于 2023-07-11 16:29:11 发布
阅读量1.1k 收藏
点赞数
文章标签： 前端 flex 弹性元素 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoya7305/article/details/131659092
版权

目录：
1. 基本布局
2. 弹性元素的属性：flex-grow
3. 弹性元素的属性：flex-shrink
4. 弹性元素的属性：flex-basis
5. flex 统一设置这3个属性（常用）
6. order

一、基本布局

<style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border:10px red solid;
            /* 当设置了ul为弹性盒子，li就自动是弹性元素 */
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        }


        li:nth-child(2){
            background-color: pink;
        }
        li:nth-child(3){
            background-color: orange;
        }


    </style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>

二、弹性元素的属性：flex-grow

  • flex-grow：1 表示所有元素平均分配剩下的空白，比如空白300，那么每个
    方框就在弹长100。
    li{
        
			width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的增长系数 */
            flex-grow: 1;
        }


        li:nth-child(2){
            background-color: pink;
          
        }
        li:nth-child(3){
            background-color: orange;
        
        }
    • 如果每一个都设置了增长系数，假设剩余空白是300， 现在总共系数分配比例：1 + 2 + 3 = 6，300 / 6 = 50, 对应的每个方框，弹长：1* 50 = 50, 2 * 50 = 100, 3 * 50 = 150
    li{
        
			width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的增长系数 */
            flex-grow: 1;
        }


        li:nth-child(2){
            background-color: pink;
             /*增长系数是按照比例去分配的， */
            flex-grow: 2;
        }
        li:nth-child(3){
            background-color: orange;
            flex-grow: 3;
        }

三、弹性元素的属性：flex-shrink

  • flex-shrink:弹性元素的缩减系数，默认1

测试：把父类ul 的width设置小点，会发现里面的元素，会自动缩减，以适应父类边框变小的情况。

 <style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 400px;
            border:10px red solid;
            /* 当设置了ul为弹性盒子，li就自动是弹性元素 */
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的增长系数*/
            flex-grow: 1;
            /* 弹性元素的缩减系数
                - 缩减系数的计算方式比较复杂
                - 缩减多少是根据 缩减系数和 元素大小 来计算。 基本理论是元素越大，缩减的越多
         
            */
            flex-shrink: 1;
        }
        
        li:nth-child(2){
            background-color: pink;
            flex-grow: 2;
        }
        li:nth-child(3){
            background-color: orange;
            flex-grow: 3;
        }
    </style>


<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>  
</body>

四、弹性元素的属性：flex-basis

   flex-basis 指定的是元素在主轴上的基本长度
                如果主轴 - 横向 - 则该值指定的就是元素的宽度 - 原来设置li的width无效
                如果主轴 - 纵向 - 则该值指定的就是元素的高度- 原来设置li的height无效
                 - 默认值是auto,表示参考元素自身的高度或宽度
                 - 如果传递了一个具体的数值，则以该值为准
  • flex-basis: 设置弹性元素的基础长度。一旦这里设定了100px， li里面设定的width:200px,就失效了。
 <style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border:10px red solid;
            /* 当设置了ul为弹性盒子，li就自动是弹性元素 */
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        
           /* 弹性元素的增长系数*/
            /* flex-grow: 1; */
            
            flex-shrink: 1;

            /* 弹性元素基础长度：flex-basis ，一旦这里设定了100， li里面		设定的width:200px,就失效了。
            所有的li,都固定成100px
             */
            flex-basis: 100px;
        }
        

        li:nth-child(2){
            background-color: pink;
            
        }
        li:nth-child(3){
            background-color: orange;
          
        }


    </style>

总的可以理解为：flex-basis: 100px; 表示设置了这个弹框的宽度是100， 然后这个弹簧能弹多长，由flex-grow来确定，越大越长。这个弹框能够缩多短，由flex-shrink来决定。 所以这3个属性，就是弹簧的3种状态

五、flex 统一设置这3个属性（常用）

- 通常我们在运用这几个属性的时候，不会一个个这样单独设置，而是直接一起写.
- 假设我们想要的效果是：flex-grow:增长系数1， flex-shrink:缩减系数1， flex-basis:基础值 auto  
 - flex 可以设置弹性元素所有的3个样式
   flex 增长 缩减  基础

<style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border:10px red solid;
            /* 当设置了ul为弹性盒子，li就自动是弹性元素 */
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
         
            /* 通常这样用：
            flex 可以设置弹性元素所有的3个样式
            flex 增长 缩减  基础
            
            */
            flex: 1 1 auto;

        }
        

        li:nth-child(2){
            background-color: pink;
            
        }
        li:nth-child(3){
            background-color: orange;
          
        }


    </style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    
</body>
  • flex 除了可以自己设置值，还有几个固定的可选值
  •        initial  "flex:0 1 auto"
         auto    "flex: 1 1 auto"
         none    "flex:0 0 auto" 设置这个，表示弹性元素没有弹性了

 li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        
            /* 
            flex 可以设置弹性元素所有的3个样式
            flex 增长 缩减  基础
               initial  "flex:0 1 auto"
               auto    "flex: 1 1 auto"
               none    "flex:0 0 auto" 设置这个，表示弹性元素没有弹性了
            */
            flex: initial;

        }

六、order

  • 控制元素的排列顺序
  li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
           
            flex: initial;

        }
        li:nth-child(1){
            /* order 决定弹性元素的排列顺序 */
            order:3;
        }

        li:nth-child(2){
            background-color: pink;  
            order:2;
        }
        li:nth-child(3){
            background-color: orange;
            order:1;
        }

注意：flex 对IE 8,9可能支持不是很好,移动端随意使用。 浮动和flex优先推荐flex

gaoya7305
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
JS Web Flex弹性盒子模型代码实例
10-15
总结来说，JS Web Flex弹性盒子模型提供了一种灵活且强大的布局解决方案，允许开发者轻松地控制元素的对齐、排列和大小调整，以适应各种屏幕尺寸。通过理解和运用`justify-content`和`flex`属性，开发者可以创建出更...
弹性元素的样式
m0_51396253的博客
10-04 81
能用flex布局就不用浮动布局 <!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"&..
flex 布局
米斯特尔曾的博客
08-20 178
flex布局 可有有两种flex、inline-flex。 当设置为display为flex后子元素的float、clear和vertical-align属性将失效 容器上的属性 flex-direction 属性值 含义 备注 row 主轴为水平方向，起点在左端。 默认值 row-reverse 主轴为水平方向，起点在右端 column 主轴为垂直方向，起点在上沿 ...
31.4弹性元素的样式——H5C3
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
08-12 186
<!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> *{ mar
10.flex------02.弹性元素的样式
weixin_52551539的博客
12-16 135
1、弹性元素的样式基本上就以下几种：flex-grow、flex-shrink、flex-basis以及order 2、flex-grow用来指定弹性元素的伸展系数（类似于弹簧能弹多少） 3、flex-shrink用来指定弹簧的压缩系数（类似于弹簧能压缩多少），弹簧的压缩系数计算比较麻烦，具体压缩多少，与弹性元素的大小及压缩系数有关 4、flex-basis：用来指定弹性元素在主轴上的基本长度（类似于弹簧的最初长度）；如果主轴是横向的，则...
html弹性布局样式,【CSS】CSS中强大的EM 弹性布局
weixin_35965372的博客
06-11 256
体验后，是不是觉得弹性布局的页面很灵活呀，而且也像“px”一样的精确。因此，只要我们掌握了“font-size”、“px”和“em”之间的基本关系，我们就可以民以食快速使用CSS创建精确的布局。CSS的Elastigirl引进EMElastigirl的“em”是极其强大和灵活的，他不管字体大小是什么，是12px，16或60，他都可以计算出其值。em其实就是一种排版的测试单位，而且他的由来还有一段小...
弹性元素的样式1
最新发布
08-08
标题"弹性元素的样式1"和描述提到了几个关键的Flexbox属性，包括`flex-grow`、`flex-shrink`、`flex-basis`以及`order`。下面将详细介绍这些属性以及它们如何影响弹性布局。 1. `flex-grow`: 这个属性定义了弹性...
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
01-08
在理解CSS的flex弹性布局之前，首先需要了解怪异盒模型。在标准盒模型中，元素的总大小由width/height、padding、border和margin组成，而在怪异盒模型中，元素的总大小仅包含width/height和margin。怪异盒模型更接近...
弹性盒模型的样式布局
jinying_51eqhappy的博客
06-05 284
.nav_list{flex:1;flex-wrap:wrap;display:flex;flex-direction:row;justify-content:space-between;}.hot-item{width:312rpx;height:316rpx;background:#fff;margin-bottom:30rpx;box-shadow: -0rpx 6rpx 10rpx 4rp...
基础巩固 - flex宽度为内容宽度
hhzzcc_的博客
07-04 7200
当设置标签display:flex则默认标签具有display:block的特性，宽度会根据父元素而撑满，如下 <divclass="box-parent"> <div class="box">box</div></div> .box-parent{ width: 300px;} .box {display:flex; background: #fff;} 上面代码中box设置flex布局，宽度默认和父元素一样为300px...
Python基础入门：Task2(day04)Python入门(中)--阿里云天池
lingling186的博客
09-10 208
Task02 Day01 列表 数据类型 整型<class ‘int’> 浮点型<class ‘float’> 布尔型<class ‘bool’> 容器数据类型 列表<class ‘list’> 元组<class ‘tuple’> 字典<class ‘dict’> 集合<class ‘set’> 字符串<class ‘str’> 1.列表的创建 创建普通列表 利用range()创建列表 利用推导式创建列表
css和css3弹性盒模型实现元素宽度（高度）自适应
acyj68799的博客
08-28 719
一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应</title> <style> *{ ...
【display:flex】弹性布局，父元素设置display:flex后子元素的宽度太大撑大了父元素的宽度
weichun
03-20 2万+
最近做一个现货平台的项目，需要展示的数据超多，不是table就是chart，布局需要弹性自适应，所以使用了css3的flex布局方案。 先看下界面： 就上边界面来说，主要分左右两大部分，各部主体都是table，用的是ant-design的table插件。主要需求是页面布局要弹性，右边表格的中间部分（如果所示，其中的“1月可买卖”，“2月可买卖”，......“11月可买卖”，“12月可买卖”）...
flex 子元素固定宽度_css3系列之弹性盒子 flex
az44yao的专栏
06-07 8760
作者：杨耿 https://www.cnblogs.com/yanggeng/p/11212526.html 弹性盒子(伸缩盒) 注意，本篇会很长，非常长， 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性ctrl + F如果觉得图太小， ctrl + +键 主要的属性有：(主要分两部分讲， 一部分讲 设置在父元素上的属性，一部分讲 设置在子元素上的属性， 还有最后一些简单的应用) 　　flex 　　flex-grow 　　flex-shrink 　　flex-basis ...
解决父元素display:flex布局下的子元素宽度无效问题
礼拜八的博客
05-23 2万+
因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置） width: 120px; flex-shrink: 0; ...
flex中元素的width
shidaping的博客
09-22 8879
这里，我们要用flex实现这样一个小功能，即左边的div固定宽度为90px,右边的div占满余下的宽度。先看下代码： *{ padding: 0; margin: 0; } .flex-container{ display: flex; height: 100px; }
display:flex的子元素无法设置宽度
热门推荐
kalinux的博客
11-13 2万+
使用display:flex制作轮播图的时候，想让每张轮播图的宽度width="100%",即屏幕的宽度，但是设置了没有用，后来发现，因为dispaly:flex是流式布局，子元素有个flex-shrink属性，表示在父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩；所以将子元素（图片）添加属性：flex-shrink:0;即可 如果想让轮播图滑动，比如设置父元素的left：...
CSS Flex弹性布局详解：方向与换行控制
CSS Flex弹性布局详解深入解析 在现代前端开发中，Flex布局（Flexible Box Layout）是一种强大的工具，特别适合用于响应式设计，特别是在移动设备上实现灵活且易于管理的布局。本文将通过一个基础案例来讲解如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值