弹性盒模型

最新推荐文章于 2024-12-28 22:33:40 发布

ﺭ并哈哈大笑踹了你一脚ﺭ小可爱

最新推荐文章于 2024-12-28 22:33:40 发布

阅读量110

点赞数

分类专栏：前端

前端专栏收录该内容

8 篇文章

订阅专栏

本文深入解析CSS Flex布局的七大核心属性：box-orient、box-direction、box-pack、box-align、box-flex、box-lines及box-ordinal-group。通过具体示例说明各属性的功能，如子元素方向、排列顺序、对齐方式及换行规则等，帮助读者全面掌握Flex布局的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display: -moz-box;
display: -webkit-box;
display: box;

1）box-orient：用来确定子元素的方向。是横着排还是竖着走。

horizontal | vertical | inline-axis | block-axis | inherit

2）box-direction：用来确定子元素的排列顺序，即是否反转。

normal | reverse | inherit

3）box-pack：用来确定子元素的左右对齐方式，对剩余空间的利用。

start | end | center | justify

4）box-align：用来确定子元素的上下对齐方式。

start | end | center | baseline | stretch

5）box-flex：用来确定子元素如何分配其剩余元素。子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和。

.content:nth-child(2) {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}

5）box-lines：用来决定子元素是可以换行显示。

6）box-flex-group：用来确定子元素的所属组。
目前没有浏览器支持 box-flex-group 属性
7）box-ordinal-group：用来确定子元素的显示顺序。

    p:nth-child(1) {
			-webkit-box-ordinal-group: 1;
		}
		
	p:nth-child(2) {
		-webkit-box-ordinal-group: 5;
	}
	
	p:nth-child(3) {
		-webkit-box-ordinal-group: 3;
	}
	
	p:nth-child(4) {
		-webkit-box-ordinal-group: 4;
	}
	
	p:nth-child(5) {
		-webkit-box-ordinal-group: 2;
	}

作者：Wendy-lxq
来源：优快云
原文：https://blog.youkuaiyun.com/u010297791/article/details/54945290
版权声明：本文为博主原创文章，转载请附上博文链接！