FLEX布局
发布时间:2020-12-15 01:49:47 所属栏目:百科 来源:网络整理
导读:1、flex布局是什么 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex;} 2、基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的
1、flex布局是什么 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{
display: flex;
}
2、基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 3、容器属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-wrap属性 默认情况下,项目都排在一条线(又称"轴线")上。 ? .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
justify-content属性
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
align-items属性 .box { align-items: flex-start | flex-end | center | baseline | stretch; }
align-content属性
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |