css弹性布局flex熟悉及利用介绍
发布时间：2022-04-20 09:46:16 所属栏目：语言 来源：互联网
导读：弹性布局，顾名思义就是具有弹性特点，能够自由的伸缩，也就是自适应网页。所以使用css弹性布局flex可以便捷，完整，响应式地实现多种页面布局。这篇文章就主要给大家介绍一下css弹性布局flex的使用。 flex弹性布局 定义：Flex布局的元素，称为Flex容器（fle
|
弹性布局，顾名思义就是具有弹性特点，能够自由的伸缩，也就是自适应网页。所以使用css弹性布局flex可以便捷，完整，响应式地实现多种页面布局。这篇文章就主要给大家介绍一下css弹性布局flex的使用。 flex弹性布局 定义：Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 弹性布局如何使用：只需要给容器设置display:flex 容器属性 .box { flex-direction: row | row-reverse | column | column-reverse; } row row-reverse column column-reverse .box { align-items: flex-start | flex-end | center | baseline | stretch;} flex-start flex-end center baseline stretch （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
