Flexbox布局 - wanshanhu79/Study GitHub Wiki

Flexbox 是一个简洁的制作智能布局的现代语法。Flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之间的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。

一、Flexbox基础知识

理解Flexbox：你需要知道的一切

水平和垂直在Flex世界中不是什么方向（概念）。常常被称为主轴（Main-Axis）和侧轴（Cross-Axis）。通俗的说，感觉Main-Axis就是水平方向，从左到右，这也是默认方向。Cross-Axis是垂直方向，从上往下。

1.Flex容器（Flex Container）：

父元素显式设置了display:flex（CSS）

1)、flex-direction

flex-direction 属性控制Flex项目沿着主轴（Main Axis）的排列方向

  • row ： 水平，从左往右
  • column ： 垂直，从上往下
  • row-reverse ： 水平，从右往左
  • column-reverse ： 垂直，从下往上

2)、flex-wrap

将Flex容器设置适合大小以适合放置更多的列表项目或者说让类表项目换行排列。

  • Wrap ：Flex项目在Flex容器中多行排列
  • nowrap：Flex项目在Flex容器内不换行排列
  • wrap-reverse：让Flex项目在容器中多行排列，方向是反的。第一行在最下面

3)、flex-flow

flex-flow 是 flex-direction 和 flex-wrap 两个属性的速记属性。

ul {
	flex-flow: row wrap;
}

4)、justify-content

定义了Flex项目在 Main-Axis 上的对齐方式，默认是flex-start

  • flex-start ： 让所有Flex项目靠Main-Axis开始边缘（左对齐）
  • flex-end ： 让所有Flex项目靠Main-Axis结束边缘（右对齐）
  • center ： 让所有Flex项目排在Main-Axis中间（居中对齐）
  • space-between ： 让除了第一个和最后一个Flex项目的两者间间距相同（两端对齐）
  • space-around ： 让每个Flex项目具有相同的空间

5)、align-items

用来控制Flex项目在Cross-Axis对齐方式。默认值是stretch

  • flex-start ： 让所有Flex项目靠Cross-Axis开始边缘（顶部对齐）
  • flex-end ：让所有Flex项目靠Cross-Axis结束边缘（底部对齐）
  • center ：让所有Flex项目在Cross-Axis中间（居中对齐）
  • stretch ： 让所有Flex项目高度和Flex容器高度一样
  • baseline ： 让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐。文字第一行的基线

6)、align-content

align-content属性用于多行的Flex容器。用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。默认值时 stretch

  • stretch ：拉伸Flex项目，让他们沿着Cross-Axis适应Flex容器可用的空间
  • flex-start ：让多行Flex项目靠Cross-Axis开始边缘。让Flex项目沿着Cross-Axis从上到下排列。因此Flex项目在Flex容器中顶部对齐
  • flex-end ：让多行Flex项目靠着Cross-Axis结束位置。让Flex项目沿着Cross-Axis从下到上排列，即底部对齐。
  • center ： 让多行Flex项目在Cross-Axis中间。在Flex容器中居中对齐

2.Flex项目（Flex Items）

Flex容器内的子元素

1)、order

允许Flex项目在一个Flex容器中重新排序。基本上，可以改变Flex项目的顺序，从一个位置移动到另一个地方。这不会影响源代码，这也意味着Flex项目的位置在HTML源代码中不需要改变。order属性的默认值是0。它可以接受一个正值，也可以接受一个负值。值得注意的是，Flex项目会根据order值重新排序。从底到高。

如果两个一下Flex项目有相同的order值时，Flex项目重新排序是基于HTML源文件的位置进行排序。

2)、flex-grow 和 flex-shrink

flex-grow 和 flex-shrink 属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

它们可能接受0或者大于0的任何正数。

默认情况下，flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。取值为0就是一个开和关的按钮。设置1或2的伸展度不同

默认情况下，flex-shrink的值是1。

3)、flex-basis

可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应flex容器之前。

flex-basis 默认的值是auto。flex-basis可以取任何用于width属性的任何值。

注意：如果flex-basis属性的值是0时，也需要使用单位。即flex-basis: 0px不能写成flex-basis: 0

默认情况，Flex项目的初始宽度有flex-basis的默认值决定，即：flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算

4)、flex速记

flex是 flex-grow、flex-shrink和 flex-basis三个属性的速记（简写）。注意顺序，缩写成GSB

5)、align-self

align-self属性更进一步让我们更好地控制弹性项目

改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目

  • flex-end ： 将目标项目对齐到Cross-Axis的末端
  • center ： 将目标项目对齐到Cross-Axis的中间
  • stretch ： 将目标项目拉伸，以沿着Cross-Axis填满Flex容器的可用空间
  • baseline ： 将目标项目沿着基线对齐。
  • auto ： 将目标Flex项目的值设置为父元素的align-items值，或者如果该元素没有父元素的话，就设置为stretch

3.绝对和相对Flex项目

两者之间主要的区别在于间距及如何计算间距。

一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据flex属性来计算，而不是内容。

绝对Flex项目的宽度只基于flex属性，而相对flex项目的宽度基于内容大小

Auto-margin 对齐

当在一个Flex项目上使用自动外边距（margin:auto）时，justify-content 属性就不起作用了。

4.切换flex-direction

如果将flex-direction切换为column，垂直方向变为Main-Axis，影响Main-Axis的每一个属性现在回影响新Main-Axis

二、YogaKit的使用

1、滑动

超出范围的视图虽然高度是对的，但不可滑动，所以如果内容超过一屏，滑动的话要加UIScrollView

2、UIScrollView的使用

需要隐藏线条，或者让线条视图的isIncludedInLayout为NO，不进行计算，会出现frame除数为负数的崩溃。

3、重新计算

//更新后使用，不然默认使用缓存，不重新计算
descriptionLabel.yoga.markDirty()
scrollView.yoga.applyLayout(preservingOrigin: false)
⚠️ **GitHub.com Fallback** ⚠️