前端

Flex 弹性盒子

2019-06-19  本文已影响14人  前白

这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程,最后重点介绍了Flex container六个属性以及Flex item的六个属性。下面我们就一一的往下看:

基本概念

Flex弹性盒模型是2009年W3C提出的一种新的布局方案,叫做Flex布局也叫作弹性盒子模型。它可以完整、简便、响应式的实现各种页面布局。布局的最外层元素叫做Flex容器(flex container),flex容器下面的子元素称之为容器成员(flex item)。

Flex容器默认存在两根轴,分别是:水平主轴(main axis)和垂直交叉轴(cross axis);水平主轴的起始轴叫做main start,结尾叫做main end;垂直交叉轴的起始和结尾轴分别是cross start和cross end。容器成员flex item默认沿着主轴排列,单个容器成员占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

如下图所示:

发展历程

从2009年W3C制定这个标准以来,总共经历了三个版本。

容器(Flex container)属性

Flex container容器属性分为六个:flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content,决定了子元素的排列方式,包括横向、纵向和一些对齐方式。

容器成员 (flex item) 属性

flex item容器成员属性主要也包括了六个属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self,决定每一个容器成员自己的属性。

上一篇下一篇

猜你喜欢

热点阅读