如何在Plotly Dash中正确使用columnCount实现8列等宽固定布局

问题原因 #

你使用的columnCount是CSS多列布局属性，设计初衷是实现类似报纸的文字流式分栏效果，默认会自动将超出列高度的内容拆分到下一列。第一个示例中第一个Div内组件少、高度低，没有触发拆分逻辑，所以布局符合预期；第二个示例新增Input后，第一个Div高度超过了当前列的默认高度，浏览器自动将该Div的内容拆分到两列展示，最终导致整体布局错乱。

解决方案 #

改用Flex弹性布局实现8列等宽并排效果，Flex是专门用于一维（行/列）元素排列的CSS方案，不会触发内容自动拆分逻辑，同时天然支持等宽分布。

修改后的完整可运行代码如下：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        html.Div([  # 元素1
            html.Button('Start'),
            dcc.Input(type = 'text'),
            dcc.Input(type = 'text'),
            dcc.Input(type = 'text')
        ], style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),
        html.H6("b", style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),  # 元素2
        html.H6("c", style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),  # 元素3
        html.H6("d", style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),  # 元素4
        html.Div([  # 元素5
            dcc.Input(type = 'text'),
            dcc.Input(type = 'text')
        ], style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),
        html.H6("e", style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),  # 元素6
        html.H6("f", style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),  # 元素7
        html.H6("g", style={'flex': '1', 'box-sizing': 'border-box', 'padding': '0 8px'}),  # 元素8
    ],
        # 父容器启用Flex布局
        style = {'display': 'flex', 'width': '100%', 'align-items': 'flex-start'}
    )
])

if __name__ == '__main__':
    app.run_server(debug = True)

关键参数说明 #

• 父容器的display: flex启用弹性布局，width: 100%撑满整行，align-items: flex-start让所有列顶部对齐，不会因为某一列高度高就把其他列也拉伸对齐。
• 每个子元素的flex: 1表示所有子元素平分父容器的宽度，实现8列均匀分布；box-sizing: border-box避免内边距、边框撑大元素宽度导致布局溢出；padding可以按需调整列之间的间距。
• 每个子元素内部可以嵌套任意数量的组件，不管是横向排列还是纵向排列都不会影响外层的8列布局，你可以按需给子元素设置内部布局样式。

内容的提问来源于stack exchange，提问作者Bonaventura