Flexbox

Flexbox

分享背景

最近看了大前端的各种技术，尤其在布局结构方面有统一化趋势（Flexbox），如react native、litho、yoga、flutter等一些移动端技术都采用了Flexbox布局结构。

简介

Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

通过设置元素的 display属性值为 flex即 display:flex可以将一个元素变成一个 Flexbox 布局容器。而其中的子元素则为叫做 Flex Item。Flexbox 非常灵活和强大，想要灵活掌握是需要大量的使用和练习（React Native项目）

属性列表

关于flex布局，有12个属性， 其中6个设置在容器上，6个设置在项目上。

容器上的属性

1. flex-direction：决定布局的主轴，子元素是沿着水平轴(row)排列，还是沿着竖直轴(column)排列。

   • row: 元素摆放的方向和文字方向一致。

   • row-reverse: 元素摆放的方向和文字方向相反。

   • column: 元素从上放到下。

   • column-reverse: 元素从下放到上。

     
     
     

     image.png

2. justify-content：子元素沿着主轴的排列方式

   • flex-start: 元素和容器的左端对齐。

   • flex-end: 元素和容器的右端对齐。

   • center: 元素在容器里居中。

   • space-between:元素之间保持相等的距离。

   • space-around:元素周围保持相等的距离。

image.png

3. align-items：子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式

   • flex-start: 元素与容器的顶部对齐。

   • flex-end: 元素与容器的底部对齐。

   • center: 元素纵向居中。

   • baseline: 元素在容器的基线位置显示。

   • stretch: 元素被拉伸以填满整个容器。

image.png

image.png

至于什么是baseline?

image.png

具体可以参考博客

4. flex-wrap：规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

   • nowrap: 所有的元素都在一行。

   • wrap: 元素自动换成多行。

   • wrap-reverse: 元素自动换成逆序的多行

image.png

5. align-content：在弹性容器内的各项没有占用交叉轴上所有可用的空间时次轴上的排列方式

   • flex-start: 多行都集中在顶部。

   • flex-end: 多行都集中在底部。

   • center: 多行居中。

   • space-between: 行与行之间保持相等距离。

   • space-around: 每行的周围保持相等距离。

   • stretch: 每一行都被拉伸以填满容器。

   和align-items差不多,两者到底有什么区别：

   align-items 用于容器内部每一个单行元素在主轴上垂直方向的对齐方式

   align-content 重点就是多行 只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。

image.png

6. flex-flow：flex-direction和flex-wrap的缩写

子元素上的属性

1. order – 决定flex元素的顺序

   有时候仅仅调转行或列的方向是不够的。这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正整数或负整数。

2. align-self – 自身对齐交叉轴，覆盖父元素设置的align-items

   设置在项目上的交叉轴方向的属性只有一个，align-self自身对齐交叉轴，覆盖父元素设置的align-items，属性值列表和align-items相同。

3. flex-grow –定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

   它指的是当flex项目没有占满整个flex-contain 的空间时，每一个项目怎么变化，要不要变大去占据空间，grow 就是生长，长大的意思。

   该属性定义项目的放大比例，默认为0，即不作任何的放大。flex容器下的项目是根据这个值的权重对容器的剩余空间进行瓜分。

4. flex-shrink –定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

5. flex-basis –在分配多余空间之前，项目占据的主轴空间

   flex-basis, 它控制每一个flex项目的默认大小。flex-basis 的取值： auto || length, length 就是我们平常用的一些属性值，如px, rem.

   flex-basic 的默认取值是auto, 如果主轴方向是水平方向(row)，它等于flex项目的宽度(width)。如果主轴方向是垂直方向(conlumn), 它等于flex项目的高度(height)。

   flex-basis 取值为length, 表示我们可以赋值给它，如150px, 那么它就会覆盖掉flex项目原有的宽度或高度(取决于主轴的方向)。

6. flex –flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

实践

玩小青蛙游戏，游戏几乎包含了所有的常用属性和属性值，形象且容易记忆。