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制定这个标准以来,总共经历了三个版本。
- 最老版本,两个属性分别为:
box(弹性伸缩盒)和inline-box(内联块级弹性伸缩盒) - 过渡版本
flexbox(弹性伸缩盒)和inline-flexbox(内联块级弹性伸缩盒) - 最新版本
flex(弹性伸缩盒)和inline-box(内联块级弹性伸缩盒)
容器(Flex container)属性
Flex container容器属性分为六个:flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content,决定了子元素的排列方式,包括横向、纵向和一些对齐方式。
-
flex-direction(决定主轴方向),主要有四个值:
1 row(横向从左到右排列,左对齐)
2 row-reverse(右对齐)
3 column(纵向排列)
4 column-reverse(反转纵向排列) -
flex-wrap(换行),主要有三个值:
1 nowrap(子元素溢出时不换行)
2 wrap(子元素溢出自动换行)
3 wrap-reverse(反转wrap排列) - flex-flow(flex-direction与flex-wrap简写)
.main { display: flex; flex-flow: wrap row; }
-
justify-content(容器成员 (flex item) 主轴上的对齐方式),主要有六个值:
1 flex-start(主轴起始位置对齐 - 左对齐)
2 flex-end(主轴结束位置对齐 - 右对齐)
3 center(主轴中间位置对齐 - 居中)
4 space-between(平均地分布在主轴上)
5 space-around (平均地分布在主轴上, 两端保留子元素与子元素之间间距大小的一半)
6 space-evenly(平均地分布在主轴上, 两端保留子元素与子元素之间间距相同间距) -
align-item(容器成员 (flex item) 交叉轴上的对齐方式),主要有五个值:
1 stretch(拉伸容器成员 (flex item) 适应容器 - 默认属性)
2 flex-start(交叉轴起始位置对齐 - 上对齐)
3 flex-end(交叉轴结束位置对齐 - 下对齐)
4 center (交叉轴中间位置对齐 - 居中)
5 baseline(容器成员 (flex item) 基线对齐) -
align-content(多根轴线的对齐方式, 单轴线不起作用 - 每一根轴线理解为一个容器成员 (flex item)),一共有七个属性,和justify-content属性很相似但是多了一个stretch属性:
1 flex-start(子元素溢出并且换行,父元素的高度大于子元素高度的总和-上对齐)
2 flex-end(下对齐)
3 center(居中对齐)
4 space-between(中间间隔)
5 space-around(两侧间隔)
6 space-evenly(平均分布)
7 stretch(拉伸,如果有高度的设置,属性不起作用)
容器成员 (flex item) 属性
flex item容器成员属性主要也包括了六个属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self,决定每一个容器成员自己的属性。
-
order(容器成员排列顺序,默认值是0,数值越小,排列越靠前,可以为负值)
.item{ order: 1; }
- flex-grow(容器成员放大比例,默认值也是0,也就是不增长,数值越大,占据剩余空间越大,不允许为负值)
- flex-shrink(容器成员缩小比例,默认值是1,0是不压缩,1是等比例压缩,数值越大,压缩比例越大,不允许为负值,压缩有一个最小宽度制约)
-
flex-basis(分配多余空间之前,容器成员占据的主轴空间)
实际上flex-basis就是width,但是优先级比width要高,比min-width和max-width又要低,是介于三者之间的一个属性,总共有三个值:
1 auto
2 px
3 % -
flex(flex-grow, flex-shrink 和 flex-basis的简写)
有三个特殊的值:auto(1 1 auto)、none(0 0 auto)、1(1 1 auto)。.item { flex-basis: 50px; }
-
align-self(允许单个容器成员有与其他容器成员不同的对齐方式),总共有六个值:
1auto (默认,遵循flex-content的属性)
2 flex-start
3 flex-end
4 center
5 baseline
6 stretch.item { align-self: auto; }