CSS-弹性布局3-伸缩属性

简介: 5、项目的属性属性值说明order该属性定义项目的排列顺序,数值越小,排序越靠前,默认为0flex-grow该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

5、项目的属性

属性值 说明
order 该属性定义项目的排列顺序,数值越小,排序越靠前,默认为0
flex-grow 该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink 该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小
flex-basis 该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小
flex 该属性是flex-grow, flex-shrink, flex-basis的简写。
align-self 该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

5.1 order

5.2 flex-grow

该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
(1)如果所有项目的flex-grow均为1,那么所有的项目将均分容器的剩余空间。
(2)如果一个项目的flex-grow为2,其他为1的话,为2的这个项目分配到的剩余空间是其他项目的2倍。

5.2 flex-shrink

该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小。
(1)如果所有的项目的flex-shrink均为1,那么所有项目将等比缩小。
(2)如果某一个项目的flex-shrink为0,则该项目不会被缩小。

5.3 flex-basis

该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小.

5.4 flex

该属性是flex-grow, flex-shrink, flex-basis的简写。

5.5 align-self

该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

相关文章
|
3天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
1月前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
29 4
CSS常用滤镜属性讲解
|
1月前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
30 2
了解 css中 backface-visibility 属性
|
23天前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
37 3
|
23天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
40 3
|
24天前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
27天前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
49 1
|
29天前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
30 1
|
30天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
1月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
142 8