Issue with lx-flex

[devonsams]

Hello! I'm running into an issue and was hoping someone could give me some advice. I'm trying to create a multi-field row using the lx-flex field type. I have configured 3 fields in the lx-flex templateOptions. The Flex options in my fields do not seems to do anything. For all 3 fields, the flex-order directive is empty and the flex-item directive is set to 3 , instead of the values I have configured. My goal is to have 3 fields on one row that stretch to fill the container evenly, with the flex container responsive behavior. What am I doing wrong?

{
    type: 'lx-flex',
    templateOptions: {
        flex: {
            container: 'row',
            wrap: 'nowrap',
            align: 'stretch',
            item: 3,
            gutter: 24
        },
        fields: [{
            type: 'lx-input',
            key: 'firstName',
            wrapper: 'lx-wrapper-flex',
            templateOptions: {
                label: 'First Name',
                flex: {
                    item: 1,
                    order: 1,
                }
            }
        }, {
            type: 'lx-input',
            key: 'middleName',
            wrapper: 'lx-wrapper-flex',
            templateOptions: {
                label: 'Middle Name',
                flex: {
                    item: 2,
                    order: 2,
                }
            }
          }, {
            type: 'lx-input',
            key: 'lastName',
            wrapper: 'lx-wrapper-flex',
            templateOptions: {
                label: 'Last Name',
                flex: {
                    item: 3,
                    order: 3,
                }
            }
          }
        ]
    },
},

[devonsams]

OK, I see now that I misunderstood how the item property is used. I see now that item sets the field width. I ended up getting it to work how I need it to. 3 fields with identical widths that fills a flex row. Here's my new configuration that's working correctly:

    {
        type: 'lx-flex',
        templateOptions: {
            flex: {
                container: 'row',
                wrap: 'nowrap',
                align: 'stretch',
                item: 'full',
                gutter: 24
            },
            fields: [{
                type: 'lx-input',
                key: 'firstName',
                templateOptions: {
                    label: 'First Name',
                },
            }, {
                type: 'lx-input',
                key: 'middleName',
                templateOptions: {
                    label: 'Middle Name',
                },
            }, {
                type: 'lx-input',
                key: 'lastName',
                templateOptions: {
                    label: 'Last Name',
                },
            }]
        },
    },