分享更有价值
被信任是一种快乐

CSS3弹性盒模型的属性怎么定义

文章页正文上

今天小编给大家分享一下CSS3弹性盒模型的属性怎么定义的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。CSS3新增的弹性盒子模型是一个完整的模块,涉及的样式属性较多。首先,对弹性盒子模型的相关概念完成基本的了解。伸缩容器(flex container):包裹伸缩项目的父元素。伸缩项目(flex item):伸缩容器的每个子元素。轴(axis):每个弹性盒子模型拥有两个轴。主轴(main axis):伸缩项目沿其一次排列的轴被称为主轴。侧轴(cross axis):垂直于主轴的轴被称为侧轴。方向(direction):伸缩容器的主轴由主轴起点和主轴终点,侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。尺寸(dimension):根据伸缩容器的主轴和侧轴,伸缩项目的宽度和高度。对应主轴的称为主轴尺寸。对应侧轴的称为侧轴尺寸。CSS3中想要设置为弹性盒子模型的话,需要通过display样式属性设置值为flexinline-flex即可。以上代码就可以指定某个元素为弹性盒子模型,该元素成为伸缩容器,子元素则成为伸缩项目。值得注意的是如果需要兼容老版本浏览器,需要增加浏览器厂商的前缀。以下代码定义了一个简单的弹性盒子:htmlcss效果如下:默认情况下,所有子元素作为伸缩项目都是沿着主轴水平排列。CSS中的flex-direction属性指定了内部元素是如何在flex容器中布局的,定义了主轴的方向(正方向或反方向)。语法结构如下:row:默认值,flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同(起点在左端)。row-reverse:表现和row相同,但是置换了主轴起点和主轴终点(起点在右端)columnflex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同(起点在上沿)column-reverse:表现和column相同,但是置换了主轴起点和主轴终点明(起点在下沿)如下代码展示了各个值的情况:代码运行效果如下所示:CSS中的justify-content属性适用于伸缩容器元素,用于设置伸缩项目沿着主轴线的对齐方式。语法结构如下:center:伸缩项目向第一行的中间位置对齐(居中)。flex-start:伸缩项目向第一行的开始位置对齐(左对齐)。flex-end:伸缩项目向第一行的结束位置对齐(右对齐)。space-between:伸缩项目会平均分布在一行中(两端对齐,项目之间的间隔都相等)。space-around:伸缩项目会平均分布在一行中(两端对齐,项目两侧的间隔相等)。示例代码如下所示:值得注意的是,实现的是伸缩项目相对于伸缩容器的对齐方式,与页面无关CSS中的align-items属性适用于伸缩容器元素,用于设置伸缩项目所在行沿着侧轴线的对齐方式。语法结构如下:center:伸缩项目向侧轴的中间位置对齐。flex-start:伸缩项目向侧轴的起点位置对齐。flex-end:伸缩项目向侧轴的终点位置对齐。baseline:伸缩项目根据伸缩项目的基线对齐。stretch:默认值,伸缩项目拉伸填充整个伸缩容器。示例代码如下所示:运行效果如下所示:配合justify-content属性,可以做出水平垂直居中CSS中的flex-wrap属性适用于伸缩容器元素,用于设置伸缩容器的子元素是单行显示还是多行显示。语法结构如下:nowrap:设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器wrap:设置伸缩项目多行显示,第一行在上方。wrap-reverse:与wrap相反,第一行在下方。示例代码如下所示:如果设置伸缩容器的宽度小于所有子元素宽度之和的话,子元素并没有自动换行也没有溢出;效果根据伸缩容器的宽度自动调整所有子元素的宽度。CSS中的align-content属性适用于伸缩容器元素,用于设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。语法结构如下:center:各行向伸缩容器的中间位置对齐。flex-start:各行向伸缩容器的起点位置对齐。flex-end:各行向伸缩容器的终点位置对齐。space-between:各行会平均分布在一行中。space-around:各行会平均分布在一行中,两端保留一半的空间。stretch:默认值,各行将会伸展以占用额外的空间。值得注意的是该属性对单行弹性盒子模型无效。示例代码如下:值得注免费云主机、域名意的是该属性对单行弹性盒子模型无效,即:带有flex-wrap: nowrapCSS中的flex-flow属性适用于伸缩容器元素,该属性是flex-directionflex-wrap的简写属性,默认值为row nowrap。语法结构如下:CSS中的order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。语法结构属性值:表示此可伸缩项目所在的次序组,默认为0。值得注意的是,order仅仅对元素的视觉顺序产生作用,并不会影响元素的逻辑顺序。示例代码如下:flex-grow属性规定在相同的容器中,项目相对于其余弹性项目的增长量,值默认为0;语法结构如下:示例代码如下:如果所有伸缩项目的flex-grow的值都为1,则它们将等分剩余空间;如果某个伸缩项目的flex-grow的值为2,其他为1,则前者占据的剩余空间将比其他项多一倍。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。语法结构如下:示例代码如下:如果所有伸缩项目的flex-shrink的值都为1,当空间不足时,都将等比例缩小;如果某个伸缩项目的flex-shrink的值为0,其他为1,则空间不足时,前者不缩小。flex-basis属性定义了在分配多余空间之前,项目在主轴方向上的初始大小。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。语法结构如下:它可以设为跟widthheight属性一样的值,例如设置230px,则项目将占据固定空间。CSS中的flex属性是flex-growflex-shrinkflex-basis的简写属性,用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。语法结构如下none:元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器。相当于将属性设置为”flex: 0 0 auto“。auto:元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收flex容器中额外的自由空间,也会缩短自身来适应flex容器。这相当于将属性设置为”flex: 1 1 auto“.flex属性可以指定1个、2个或3个值。单值语法:值必须为以下其中之一:一个无单位数():它会被当作的值。一个有效的宽度(width)值:它会被当作的值。关键字noneautoinitial.双值语法:第一个值必须为一个无单位数,并且它会被当作的值。第二个值必须为以下之一:一个无单位数:它会被当作的值。一个有效的宽度值:它会被当作的值。三值语法:第一个值必须为一个无单位数,并且它会被当作的值。第二个值必须为一个无单位数,并且它会被当作 的值。第三个值必须为一个有效的宽度值,并且它会被当作 的值。CSS中align-self属性适用于伸缩容器元素,于设置伸缩项目自身元素在侧轴的对齐方式。该属性可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性;语法结构如下所示:center:伸缩项目向侧轴的中间位置对齐。flex-start:伸缩项目向侧轴的起点位置对齐。flex-end:伸缩项目向侧轴的终点位置对齐。baseline:伸缩项目根据伸缩项目的基线对齐。stretch:默认值,伸缩项目拉伸填充整个伸缩容器。示例代码如下:以上就是“CSS3弹性盒模型的属性怎么定义”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注云技术行业资讯频道。

相关推荐: .NET中间件与VUE拦截器联合使用的方法是什么

今天小编给大家分享一下.NET中间件与VUE拦截器联合使用的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。特性:接口加上特性:中间件代…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册