flex布局的适用场景
flex 布局适用于应用程序的组件和小规模布局 (grid 布局适用于大规模布局)
水平方向上的起始和终止方向的概念
世界上的语言有两种书写方向(包括:从左向右、从右向左),而渲染不同书写方向的语言的网页在设置flex布局的水平轴属性时会有所区别,这两种书写方向如下:
- LTR: left to right. 语言书写的方向是从左向右。所以在水平方向上的起始方向是左,终止方向是右(一般用于大部分语言,例如:汉语,英语、法语、西班牙语、德语等)
- RTL: right to left. 语言书写的方向是从右向左。所以在水平方向上的起始方向是右,终止方向是左(一般有4种常见语言:阿拉伯语,希伯来语,波斯语,乌尔都语)
- 阿拉伯语: 阿拉伯国家
- 波斯语:伊朗、塔吉克斯坦
- 希伯来语:犹太人(例如:以色列)
- 乌尔都语:巴基斯坦 后文会使用到 "水平方向上的起始方向"和 "水平方向上的终止方向" 这两个概念。
flex布局的基本概念
-
flex容器和flex容器内的孩子
- 弹性容器(flex container):设置了布局方式为 flex 或 inline-flex 的元素
- 弹性元素(flex item),是弹性容器内的子元素
-
flex容器内的坐标轴:
- 坐标轴按主次关系分类:
- 主轴(main axis)
- 辅轴,也叫侧轴、交叉轴(cross axis)
- flex item 在主轴上的摆放顺序:
- flex item 在 flex容器内水平方向上的摆放分类:
- flex item 在容器内从横轴的起始向终止方向摆放:row (和 row-reverse 是左右镜像对称的关系)
- flex item 在容器内从横轴的终止向起始方向摆放:row-reverse (和 row 是左右镜像对称的关系)
- flex item 在 flex容器内垂直方向上的摆放分类:
- flex item 在容器内从上向下摆放:column (和 column-reverse 是上下镜像对称的关系)
- flex item 在容器内从下向上摆放:column-reverse (和 column 是上下镜像对称的关系)
- flex item 在 flex容器内水平方向上的摆放分类:
- 坐标轴按主次关系分类:
flex布局的相关css属性
- 为一个盒子设置使用flex布局
- 设置对象:flex container
- 代码:
display: flex
或display: inline-flex
主轴相关的属性
-
设置flex item在主轴上的摆放方向
- 设置对象:flex container
- 属性:
flex-direction
(或者flex-flow
两个数值中的第一个值) - 常用数值:
- row: **【默认值】**主轴是横轴,辅轴是纵轴。flex item 在容器内从横轴的起始向终止方向摆放
- row-reverse: 主轴是横轴,辅轴是纵轴。flex item 在容器内从横轴的终止向起始方向摆放
- column: 主轴是纵轴,辅轴是横轴。flex item 在容器内从上向下摆放
- column-reverse: 主轴是纵轴,辅轴是横轴。flex item 在容器内从下向上摆放
-
设置当flex item数量过多时是换行显示还是不换行从容器中溢出
- 设置对象:flex container
- 属性:
flex-wrap
(或者flex-flow
两个数值中的第二个值) - 常用数值:
-
nowrap: **【默认值】**不换行。即:无论flex item的数量有多少,所有的 flex item 都必须在一行内显示,即使显示不下而从 flex 容器中溢出也不换行。
-
wrap: 从上向下可换行的显示。当flex item数量过多显示不下时允许换行显示,避免从flex容器中溢出。
-
wrap-reverse:从下向上可换行的显示。当flex item数量过多显示不下时允许换行显示,避免从flex容器中溢出。
-
-
同时设置 flex item在主轴上的摆放方向,和 flex item数量过多时是换行显示还是不换行从容器中溢出
- 设置对象:flex container
- 属性:
flex-flow
(直译为"flex流", 含义是 flex item的流动策略设置, 包括了 flex item的流动方向和当流动到容器内的行尾时是否换行的策略,相当于同时设置flex-direction
和flex-wrap
) - 默认值:
row nowrap
-
设置 flex item 在主轴上的摆放位置
- 设置对象:flex container
- 属性:
justify-content
- 常用数值:
- normal: 【默认值】
- center: 在主轴方向上居中, item之间默认紧挨(没有空白空间)
- flex-start: flex item 紧挨主轴的起始方向
- flex-end: flex item 紧挨主轴的结束方向
- space-around: 每个flex item在主轴方向上各自周围单方向的空白空间相等
- space-between: 每个flex item在主轴方向上各自周围单方向的空白空间相等,但起始 item 和结束的item 各自紧挨 flex container 的一条边框(不留空白空间)
- space-evenly: 等效解释为:如果各 flex item 存在外边距合并的效果,那么各外边距都相等。
辅轴相关的属性
- 设置 flex item 的整体在辅轴上相对于容器的位置:
- 一刀切式地为所有 flex item 设置在辅轴上他们组成的整体相对于容器的位置:
- 设置对象:flex container
- 属性:
align-items
- 常用数值:
- center: flex item 在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
- stretch: flex item 在侧轴方向被拉伸到与容器相同的高度或宽度。但当设置了 max-width,max-height 时,则 max-width,max-height 的权重更高。
- flex-start:所有 flex item 向侧轴起点对齐。
- flex-end: 所有 flex item 向侧轴终点对齐。
- baseline: 所有 flex item 相互之间按照基线对齐。
- center: flex item 在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
- 单独为某个或者某一些 flex item 设置在辅轴上各自相对于容器的位置:
- 设置对象:flex item
- 属性:
align-self
- 说明:其数值会覆盖已有的 align-items 的值
- 常用数值:与
align-items
的相同。
- align-content:
- 设置对象:flex container
- 功能和
align-items
的区别是:- align-items: 是将items作为一个整体,设置的是这个整体在容器内的位置(这个整体的总宽/高度不变,不会被压缩或拉伸),但却不会设置这个整体内部各行/列之间的行/列间距(这个行/列间距需要由 align-content 来设置)。
- align-content:功能和 align-items 互补。设置的是 items 内部各行之间的行/列间距,即:这个整体的宽/高度会被压缩或拉伸。所以当 items只有一行/列时,设置 align-content 将不起任何效果. (摘自 flexboxfroggy.com/)
- 一刀切式地为所有 flex item 设置在辅轴上他们组成的整体相对于容器的位置:
flex item 相关的属性
- flex item 实际在页面上的展示的相对位置关系
- 设置对象:flex item
- 属性:
order
- 数值区间:正负数,0(数值越大,在页面上的展示顺序就越靠近主轴的正方向)
- flex item 在主轴上占据空间的百分比分布
- 设置对象:flex item
- 属性:
flex
(是flex-grow
,flex-basis
,flex-shrink
三者的集合缩写形式)flex-grow
: 该flex item对主轴上剩余空间所分得的相对份额数flex-basis
: 一个具体的尺寸值,表示各 flex item 在主轴方向上首先至少要获得的尺寸数值,先把各item的flex-basis
分配给各自,分配完以后,对主轴上剩余的空间,按照各item的flex-grow
所对应的份额去分配给各 item。这样的话,剩余空间被所有 flex item 瓜分掉。而每个flex item在主轴上的尺寸由两部分构成:该 flex item的flex-basis
尺寸和该 flex item 通过flex-grow
所分得的剩余空间的尺寸。flex-shrink
:flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认值1。
总结
-
float
、clear
和vertical-align
对 flex item 无效 -
flex container 和 flex item 各自适用的与flex相关的 css 属性:
- 适用于 flex container 且与 flex 相关的 css属性:
display
flex-flow
(flex-direction
,flex-wrap
)justify-content
align-items
align-content
- 适用于 flex item 且与 flex 相关的 css属性:
order
flex
(flex-grow
,flex-shrink
,flex-basis
)align-self
- 适用于 flex container 且与 flex 相关的 css属性:
-
flex item 对主轴剩余空间的两种管理策略
- 瓜分剩余空间的策略。即:主轴上的剩余空间会按照各 flex item设置的瓜分百分比进行瓜分,每个flex item在主轴方向的尺寸是自己的原尺寸加上瓜分剩余空间所得到的尺寸,所以 flex item 在主轴方向上的尺寸可能会变大。 如果有此需求,可以使用
flex-grow
或缩写flex
来设置。 - 不瓜分剩余空间,而只是调整 flex item 在主轴方向上的摆放位置的策略。即:flex item 在主轴方向的尺寸不变,而只是让自己在主轴上移动到一个更合适的位置去摆放,以便符合
justify-content
的要求。 如果有此需求,需要禁止使用flex-grow
或flex
, 同时要对 flex 容器使用justify-content
来设置flex item 在主轴上的摆放位置。
举例:
<section> <p>1</p> <p>2</p> <p>3</p> </section>
section { background-color: lightblue; max-width: 500px; display: flex; flex-direction: row; justify-content: space-evenly; } p { border: 1px solid blue; width: 10px; color: black; }
上述代码设置了
justify-content
并且 flex item 没有设置flex
和flex-grow
, 则效果为不瓜分剩余空间,而是按照justify-content
的要求来摆放,显示效果如下:如果上述代码为 p 元素设置
flex: 1;
或者flex-grow: 1;
,代码如下:p { flex: 1; /* 或者 flex-grow: 1; */ }
则显示效果变为:各个 p 元素将水平方向上的剩余空间全部瓜分掉,显示效果如下:
- 瓜分剩余空间的策略。即:主轴上的剩余空间会按照各 flex item设置的瓜分百分比进行瓜分,每个flex item在主轴方向的尺寸是自己的原尺寸加上瓜分剩余空间所得到的尺寸,所以 flex item 在主轴方向上的尺寸可能会变大。 如果有此需求,可以使用
flex练习的小游戏
- 通过编写与 flex 相关的CSS代码,让青蛙们能够跳到与各自颜色相对应的荷叶上的游戏。通过编写游戏代码,来辅助熟悉与 flex 相关的 css属性:
flexboxfroggy.com/