flex布局(flex)

​​​​一、flex项目属性

  1. orderorder属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
  2. flex-grow(flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
  3. flex-shrink (flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
  4. flex-basis (flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间,如果有则给项目设置对应的空间
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex布局Flexible Box Layout)是一种用于网页布局的CSS3模块,它提供了一种更加灵活和自适应的方式来排列和对齐元素。Flex布局的设计目标是为了解决传统的CSS布局中的一些困难和限制。 Flex布局由容器(flex container)和项目(flex item)组成。容器是指应用Flex布局的父元素,而项目则是容器中的子元素。通过在容器上设置属性,可以控制项目在容器中的排列方式。 以下是Flex布局中常用的属性: 1. 容器属性: - `display: flex;`:将容器设置为Flex布局。 - `flex-direction: row/column;`:指定项目的排列方向。默认值为row,表示水平方向,可以设置为column,表示垂直方向。 - `flex-wrap: nowrap/wrap/wrap-reverse;`:控制项目是否换行。nowrap表示不换行,wrap表示自动换行,wrap-reverse表示自动换行且倒序排列。 - `flex-flow: <flex-direction> <flex-wrap>;`:flex-direction和flex-wrap的简写形式。 - `justify-content: flex-start/center/flex-end/space-between/space-around/space-evenly;`:控制项目在主轴上的对齐方式。flex-start表示靠左对齐,center表示居中对齐,flex-end表示靠右对齐,space-between表示两端对齐,space-around表示平均分布,space-evenly表示平均分布且间距相等。 - `align-items: flex-start/center/flex-end/stretch/baseline;`:控制项目在交叉轴上的对齐方式。flex-start表示靠上对齐,center表示居中对齐,flex-end表示靠下对齐,stretch表示拉伸填充,baseline表示基线对齐。 - `align-content: flex-start/center/flex-end/space-between/space-around/stretch;`:控制多行项目在交叉轴上的对齐方式。与align-items的具体效果类似。 2. 项目属性: - `order: <integer>;`:控制项目的排列顺序。默认值为0,可以为正整数或负整数。 - `flex-grow: <number>;`:控制项目的放大比例。默认值为0,表示不放大,可以设置为正整数。 - `flex-shrink: <number>;`:控制项目的缩小比例。默认值为1,表示可以缩小,可以设置为正整数。 - `flex-basis: <length>|auto;`:指定项目在主轴上的初始大小。默认值为auto,表示由项目的内容决定,可以设置为具体的长度值。 - `flex: <flex-grow> <flex-shrink> <flex-basis>;`:flex-growflex-shrink和flex-basis的简写形式。 - `align-self: auto/flex-start/center/flex-end/stretch/baseline;`:控制单个项目在交叉轴上的对齐方式,覆盖容器的align-items属性。 Flex布局具有很强的灵活性和自适应性,可以轻松实现各种复杂的网

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值