自动调整IPython小部件布局

Question

我正在创建一个交互式的jupyter笔记本，使用ipython小部件，并希望用户从一定数量的复选框中进行选择。我使用下面的代码来可视化包含复选框的HBox。

num_checks = 10

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%')

checkboxes = []
for f in range(num_checks):
    checkboxes.append(\
        widgets.Checkbox(description = 'Checkbox [%d]'%(f), \
                         value=False, width=50))

cb_cont.children=[i for i in checkboxes]
display(cb_cont)

这里是上述代码输出的截图：

正如您所看到的，盒子的内容溢出并超出了容器的宽度。

我可以通过将overflow_x属性设置为以下之一来更改行为：['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', '']。

例如，cb_cont.overflow_x = 'scroll'会产生以下输出窗口：

当内容不溢出而变得不可见且可以滚动时使用。

如何设置框的属性以可视化无法适合换行的内容？

显然，我可以使用多个HBox对象，每个对象包含最大数量的复选框，以适合窗口大小，但这不是所需的解决方案，原因如下：

1. 取决于屏幕分辨率，该数字可能会更改。
2. 要选择的复选框数量取决于先前的计算，事先不知道。

- Matteo

Answer 1

我也遇到了小部件的同样问题，经过尝试各种Box属性后，我得出了以下解决方案：

您需要设置以下属性：

• display：'inline-flex'
• flex_flow：'row wrap'

这对我来说有效，无论复选框数量有多少（我尝试了多达100个）。另一方面，设置高度属性并不是很有用。您需要根据复选框数量或屏幕分辨率调整高度。

import ipywidgets as widgets
from ipywidgets import *
from IPython.display import display

num_checks = 50

cb_cont = HBox(layout=Layout(width='100%',display='inline-flex',flex_flow='row wrap'))
#cb_cont.overflow_x = 'scroll'

checkboxes = []
for f in range(num_checks):
    checkboxes.append(\
        widgets.Checkbox(description = 'Checkbox [%d]'%(f), \
                     value=False, width=50))

cb_cont.children=[i for i in checkboxes]
display(cb_cont)

- Ely

---

我一直在尝试使用flex_flow和flex_wrap属性，并且发现当项目是下拉菜单元素时，无法使盒子自动换行。只有对于其他元素（如按钮等）才有效。 你的答案很好，完全正确！谢谢！ - Chen Avnery

Answer 2

您可以使用百分比来设置宽度（和高度）：

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%')

并设置 cb_cont.overflow_x = 'auto'

- Etienne Cmb