CSS弹性盒子Flex

作者：周周微商互联 | 来源：互联网 | 2023-08-20 20:50

弹性盒子可以控制内部元素的布局display:flex元素成为弹性容器，他的子元素成为弹性子元素弹性子元素像块级元素一样填充可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性

弹性盒子可以控制内部元素的布局display:flex
元素成为弹性容器，他的子元素成为弹性子元素
弹性子元素像块级元素一样填充可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，高度由他们的内容决定。
利用弹性盒子写一个菜单栏
在这里插入图片描述

在这里插入图片描述

/*外部容器设置为弹性*/ .site-nav { display: flex; padding: .5em; background-color: #5f4b44; list-style-type: none; border-radius: .2em; } .site-nav > li { margin-top: 0; } .site-nav > li > a { display: block; padding: .5em 1em; background-color: #cc6b5a; color: white; text-decoration: none; } /*所有块的左部外边距*/ .site-nav > li + li { margin-left: 1.5em; } /*设置最后一块的左部外边距为auto来让他填满容器，实现靠右的效果*/ .site-nav > .nav-right { margin-left: auto; }

justify-content 等间距

flex属性

flex属性是简写属性
flex-basis
元素大小的基准值，作用于宽度还是高度取决于flex-direction
px、em、百分比
flex-grow
非负整数，子元素的盒模型占据之后的容器宽度可能会有留白
留白会将增长因子视作权重来分给子元素
0代表不增长
flex-shrink
子元素的盒模型占据之后的容器宽度可能不足
0代表不缩水

弹性方向flex-direction

flex-direction:row;//默认控制子元素从左到右
column、row-reverse、column-reverse

在垂直的弹性盒子里，flex的收缩属性不会起作用

在这里插入图片描述


    
      Ink
    
    
      
        Home

        Features

        Pricing

        Support

        
          About
        

      

    

    
      
        Team collaboration done right
        Thousands of teams from all over the
          world turn to Ink to communicate
          and get things done.

      

     
      
        
        
        
            Login

            
              Username
                              name="username"/>
            

            
              Password
                              name="password"/>
            

            
          
        

        
          Starting at
          
            $
            20
            .00
          

          
            Sign up

推荐阅读

go
在范围[0..n-1]中产生m个不同的随机数 - Generating m distinct random numbers in the range [0..n-1]

Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]

蜡笔小新 2024-11-13 09:49:14
text
com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例

com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-13 10:47:33
js
SoundPool

如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]

蜡笔小新 2024-11-13 16:47:19
version
JUC（三）：深入解析AQS

本文详细介绍了Java并发工具包中的核心类AQS（AbstractQueuedSynchronizer），包括其基本概念、数据结构、源码分析及核心方法的实现。 ... [详细]

蜡笔小新 2024-11-13 15:40:34
go
利用OpenCV和线性SVM实现人脸识别

本文介绍如何使用OpenCV和线性支持向量机（SVM）模型来开发一个简单的人脸识别系统，特别关注在只有一个用户数据集时的处理方法。 ... [详细]

蜡笔小新 2024-11-13 14:50:37
go
Spring – Bean Life Cycle

Spring – Bean Life Cycle ... [详细]

蜡笔小新 2024-11-13 13:24:40
text
IOS Run loop详解

为什么80%的码农都做不了架构师？转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]

蜡笔小新 2024-11-13 12:14:35
version
CentOS 7 中配置开机自动挂载 NFS 的解决方案

本文详细介绍了在 CentOS 7 系统中配置 fstab 文件以实现开机自动挂载 NFS 共享目录的方法，并解决了常见的配置失败问题。 ... [详细]

蜡笔小新 2024-11-13 12:05:24
go
单片微机原理P3：80C51外部拓展系统

　　外部拓展其实是个相对来说很好玩的章节，可以真正开始用单片机写程序了，比较重要的是外部存储器拓展，81C55拓展，矩阵键盘，动态显示，DAC和ADC。0.IO接口电路概念与存 ... [详细]

蜡笔小新 2024-11-12 19:51:29
go
c/c++常用代码doc,ppt,xls文件格式转PDF格式[转]

[转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]

蜡笔小新 2024-11-12 16:19:40
go
杜甫《喜晴》的两种英译比较

本文对比了杜甫《喜晴》的两种英文翻译版本：a. Pleased with Sunny Weather 和 b. Rejoicing in Clearing Weather。a 版由 alexcwlin 翻译并经 Adam Lam 编辑，b 版则由哈佛大学的宇文所安教授 (Prof. Stephen Owen) 翻译。 ... [详细]

蜡笔小新 2024-11-12 15:02:28
go
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
text
实验九：使用SharedPreferences存储简单数据

本实验旨在帮助学生理解和掌握使用SharedPreferences存储和读取简单数据的方法，包括程序参数和用户选项。 ... [详细]

蜡笔小新 2024-11-12 14:21:47
text
字节流(InputStream和OutputStream)，字节流读写文件，字节流的缓冲区，字节缓冲流

字节流抽象类InputStream和OutputStream是字节流的顶级父类所有的字节输入流都继承自InputStream，所有的输出流都继承子OutputStreamInput ... [详细]

蜡笔小新 2024-11-12 14:07:25
数组
如何在Java中使用DButils类

这期内容当中小编将会给大家带来有关如何在Java中使用DButils类，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。D ... [详细]

蜡笔小新 2024-11-12 13:46:11

周周微商互联

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章