lvgl doc flex

lv_obj_set_layout(obj, LV_LAYOUT_FLEX)

The possible values for flex_flow are:

LV_FLEX_FLOW_ROW: Place the children in a row without wrapping
不换行的ROW

LV_FLEX_FLOW_COLUMN: Place the children in a column without wrapping

LV_FLEX_FLOW_ROW_WRAP: Place the children in a row with wrapping

LV_FLEX_FLOW_COLUMN_WRAP: Place the children in a column with wrapping

LV_FLEX_FLOW_ROW_REVERSE: Place the children in a row without wrapping but in reversed order

LV_FLEX_FLOW_COLUMN_REVERSE: Place the children in a column without wrapping but in reversed order

LV_FLEX_FLOW_ROW_WRAP_REVERSE: Place the children in a row with wrapping but in reversed order

LV_FLEX_FLOW_COLUMN_WRAP_REVERSE: Place the children in a column with wrapping but in reversed order



The possible values are:

LV_FLEX_ALIGN_START: means left on a horizontally and top vertically. (default)

LV_FLEX_ALIGN_END: means right on a horizontally and bottom vertically

LV_FLEX_ALIGN_CENTER: simply center

LV_FLEX_ALIGN_SPACE_EVENLY: items are distributed so that the spacing between any two items (and the space to the edges) is equal. Does not apply to track_cross_place.

LV_FLEX_ALIGN_SPACE_AROUND: items are evenly distributed in the track with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to track_cross_place.

LV_FLEX_ALIGN_SPACE_BETWEEN: items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to track_cross_place.

Flex布局 在CSS中是当前最流行的布局方式，并且在移动端以及较新的pc浏览器有着很高的支持度，基本上已经可以完全替代传统的 float, inline-block 各种混合的布局方式了。

flex布局因为是比较新的标准，所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式，对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。

当前的现代浏览器中 flex layout支持度已经超过98%

Flexible box - Can I use

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

Container Style 容器样式:

flex可以提供block和inline两种对外效果。但是并不影响内部元素。因为内部元素会被设定为flex项目。

设置一个flex容器:

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

.flex{
    display:flex;
    display: -webkit-flex; /* Safari */
}
.inline-flex{
    display:inline-flex;
}

- 阅读剩余部分 -