首页 > 其他分享 >Flex 布局常用属性

Flex 布局常用属性

时间:2023-12-12 12:03:25浏览次数:36  
标签:容器 常用 Flex align 元素 content flex 对齐 属性

Flex布局(弹性布局)是CSS3中引入的一种布局模式,它通过display: flex;设置在容器上,然后利用一系列的属性来控制子元素的排列和对齐方式。以下是常用的Flex布局属性:

  1. display

    • display: flex;:将容器指定为弹性容器。
  2. flex-direction

    • flex-direction: row;:水平主轴,子元素水平排列(默认值)。
    • flex-direction: row-reverse;:水平反向主轴,子元素水平反向排列。
    • flex-direction: column;:垂直主轴,子元素垂直排列。
    • flex-direction: column-reverse;:垂直反向主轴,子元素垂直反向排列。
  3. flex-wrap

    • flex-wrap: nowrap;:默认值,子元素不换行,尽可能在一行显示。
    • flex-wrap: wrap;:子元素自动换行,超出容器宽度会进行换行显示。
    • flex-wrap: wrap-reverse;:子元素反向换行。
  4. justify-content

    • justify-content: flex-start;:默认值,子元素靠容器的起始位置对齐。
    • justify-content: flex-end;:子元素靠容器的结束位置对齐。
    • justify-content: center;:子元素在容器中居中对齐。
    • justify-content: space-between;:子元素平均分布在容器内,两端不留空白。
    • justify-content: space-around;:子元素平均分布在容器内,两端留有相等的空白。
  5. align-items

    • align-items: stretch;:默认值,子元素拉伸以填充容器高度。
    • align-items: flex-start;:子元素靠容器的顶部对齐。
    • align-items: flex-end;:子元素靠容器的底部对齐。
    • align-items: center;:子元素在容器中垂直居中对齐。
    • align-items: baseline;:子元素基线对齐。
  6. align-content

    • align-content: stretch;:默认值,容器内的行拉伸以填充容器高度。
    • align-content: flex-start;:所有行在容器的顶部对齐。
    • align-content: flex-end;:所有行在容器的底部对齐。
    • align-content: center;:所有行在容器中垂直居中对齐。
    • align-content: space-between;:所有行平均分布在容器内,两端不留空白。
    • align-content: space-around;:所有行平均分布在容器内,两端留有相等的空白。
  7. flex

    • flex: flex-grow flex-shrink flex-basis;:设置子元素的缩放比例、收缩能力和基准值。
    • flex-grow:指定子元素的放大比例。
    • flex-shrink:指定子元素的收缩比例。
    • flex-basis:指定子元素的基准值。

这些是Flex布局中常用的属性,通过组合使用它们,可以实现各种不同的弹性布局效果。

标签:容器,常用,Flex,align,元素,content,flex,对齐,属性
From: https://www.cnblogs.com/Linzj5950/p/17896484.html

相关文章

  • position 定位常用属性
    CSS的position属性用于指定元素的定位方式。以下是常见的position属性取值:position:static;默认值,元素按照正常的文档流布局显示,不进行特殊定位。position:relative;相对定位,元素相对于其正常位置进行定位。可以使用top、right、bottom、left属性来调整元素的位置。......
  • nsis常用配置项
    nsis:{ "oneClick":false,//创建一键安装程序还是辅助安装程序(默认是一键安装)"allowElevation":true,//是否允许请求提升,如果为false,则用户必须使用提升的权限重新启动安装程序(仅作用于辅助安装程序)"allowToChangeInstallationDirectory":true,//是否允许......
  • WordPress简码实现的一些常用的效果
    首先要确保框架里已经安装好elementpro插件,下面是使用简码,来实现效果,在element中找到简码,并且在WordPress后台主题编辑器中,找到function.php文件, 显示产品的分类,下面是效果图 在function.php中添加如下代码,add_theme_support('post-thumbnails');//注册简码以显示......
  • js 传参到 vue + 计算属性使用
    场景js中存储xAxisData=[......]、yAxisData=[......],想在vue中使用,但要求使用前转化成data存有若干个(x,y)的形式在改变xAxisData或yAxisData的任意一值时,都会反馈更新到vue的每一个调用了data的地方方法一:js中Cannotreadpropertiesofundefine......
  • 数据库的字段属性
    Unsigned:无符号的整数声明了该列不能声明为负数zerofill:0填充的不足的位数,使用0来填充,int(3),5---005自增:通常理解,自动在上一条记录的基础上+1(默认)通常用来设计唯一的主键~index,必须是整数类型可以自定义设计主键自增的起始值和步长非空null notnull假设设置为notnull,如果不......
  • 深度学习面试常用代码:MHA/MQA/GQA/LN/BN/位置编码代码
    深度学习常用代码参考:https://zhuanlan.zhihu.com/p/6505754261.MHA(MultiHeadAttention)代码实现#1.MHA实现importtorchimporttorch.nnasnnimporttorch.nn.functionalasFclassScaleDotProductAttention(nn.Module):def__init__(self,):......
  • js Object常用的方法
    Object.keys(obj)Object.keys(obj):返回对象自身所有可枚举属性的键名数组处理对象,返回可枚举的键数组constobject1={a:'somestring',b:42,c:false};console.log(Object.keys(object1));//结果:Array["a","b","c"]处理数组和字符串,返回索引值数组......
  • 在自动化测试时,Python常用的几个加密算法,你有用到吗
    本文分享自华为云社区《『加密算法』|自动化测试时基于Python常用的几个加密算法实现,你有用到吗?》,作者:虫无涯。写在前边这几天做自动化测试,遇到一个问题,那就是接口的请求的密码是加密的;产品的要求是不能使用其他特殊手段,他给提供加密算法,需要在接口请求的时候,使用加密算法处......
  • Python语言合并列表元素常用的方法!
    众所周知,列表是Python中常见的数据类型,它可以存储多个元素。但由于某种需求,我们有时候需要将多个元素进行合并,那么Python语言如何合并列表中的元素?以下是常用方法介绍。1、使用+运算符在Python中,可以使用+运算符将两个列表的元素合并成一个新的列表。例如,假设有两个列......
  • 列举不少于5个springMVC的常用的注解,并说明注解的作用
    列举不少于5个springMVC的常用的注解,并说明注解的作用;SpringMVC中有许多注解用于简化和增强控制器、请求映射、数据绑定等方面的操作。以下是不少于5个常用的SpringMVC注解及其作用:@Controller:作用:用于标识一个类是SpringMVC中的控制器,它处理客户端的请求。被注解为@......