发表日期: 2022-05-31 08:50:12 浏览次数:75
黑龙江省双鸭山网站建设_网站制作_公司开发设计_一站式全包_10多年经验满意为止

CSS Flexbox 布局模块
在 Flexbox 布局模块(问世)之前,可用的布局模式有以下四种:
块(Block),用于网页中的部分(节)
行内(Inline),用于文本
表,用于二维表数据
定位,用于元素的明确位置
弹性框布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
浏览器支持
所有现代浏览器均支持 flexbox 属性。
29.0 11.0 22.0 10 48
Flexbox 元素
如需开始使用 Flexbox 模型,您需要首先定义 Flex 容器。
1
2
3
上面的元素表示一个带有三个 flex 项目的 flex 容器(蓝色区域)。
实例
含有三个 flex 项目的 flex 容器:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
亲自试一试
父元素(容器)
通过将 display 属性设置为 flex,flex 容器将可伸缩:
1
2
3
实例
.flex-container {
display: flex;
}
亲自试一试
以下是 flex 容器属性:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction 属性
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
1
2
3
实例
column 值设置垂直堆叠 flex 项目(从上到下):
.flex-container {
display: flex;
flex-direction: column;
}
亲自试一试
实例
column-reverse 值垂直堆叠 flex 项目(但从下到上):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
亲自试一试
实例
row 值水平堆叠 flex 项目(从左到右):
.flex-container {
display: flex;
flex-direction: row;
}
亲自试一试
实例
row-reverse 值水平堆叠 flex 项目(但从右到左):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
亲自试一试
flex-wrap 属性
黑龙江省双鸭山网站建设_网站制作_公司开发设计_一站式全包_10多年经验满意为止