广州建设厅官方网站,百度搜索广告投放,部署个人网站,用dw制作网站模板Flex布局详解
简介
Flex#xff08;Flexible Box#xff09;布局模型是一种高效且便于布局、对齐内容的一维布局模型#xff0c;可用于解决复杂的布局挑战#xff0c;特别适用于应用程序组件和小型布局。
基础概念
容器#xff08;Container#xff09;: 使用 displa…Flex布局详解
简介
FlexFlexible Box布局模型是一种高效且便于布局、对齐内容的一维布局模型可用于解决复杂的布局挑战特别适用于应用程序组件和小型布局。
基础概念
容器Container: 使用 display: flex 或 display: inline-flex 的元素被称为Flex容器。项目Item: 容器内的子元素自动成为Flex项目。
容器属性
display
使用 display: flex 或 display: inline-flex 可以定义一个Flex容器。
.container {display: flex; /* or inline-flex */
}flex-direction
这个属性定义了主轴决定了项目的排列方向。
.container {flex-direction: row | row-reverse | column | column-reverse;
}justify-content
定义了项目在主轴上的对齐方式。
.container {justify-content: flex-start | flex-end | center | space-between | space-around;
}align-items
定义项目在交叉轴上如何对齐。
.container {align-items: flex-start | flex-end | center | baseline | stretch;
}flex-wrap
定义项目是否换行。
.container {flex-wrap: nowrap | wrap | wrap-reverse;
}align-content
多行的对齐方式。
.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}项目属性
order
定义项目的排列顺序。
.item {order: integer;
}flex-grow
定义项目的放大比例。
.item {flex-grow: number;
}flex-shrink
定义了项目的缩小比例。
.item {flex-shrink: number;
}flex-basis
定义了在分配多余空间之前项目占据的主轴空间。
.item {flex-basis: length | auto;
}align-self
允许单个项目与其他项目不同的对齐方式。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}实例
HTML:
div classcontainerdiv classitem1/divdiv classitem2/divdiv classitem3/div
/divCSS:
.container {display: flex;justify-content: space-between;align-items: center;
}.item {width: 100px;height: 100px;background-color: LightSkyBlue;text-align: center;line-height: 100px;
}总结
Flex布局非常强大适用于各种复杂的布局需求。掌握了以上属性你应该可以自如地使用Flex进行页面布局了。
希望这篇博客能帮助你更好地理解和使用Flex布局有其他问题随时提出。
