# FlexLayoutPanel

Namespace: **Wisej.Web**

Assembly: **Wisej.Framework** (4.0.0.0)

* [Control](/api/wisej.web/general/control.md)
  * [ScrollableControl](/api/wisej.web/containers/scrollablecontrol.md)
    * [Panel](/api/wisej.web/containers/wisej.web.panel.md)
      * [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md)

Represents a panel that dynamically arranges its child controls.

{% tabs %}
{% tab title="C#" %}

```csharp
public class FlexLayoutPanel : Panel, IExtenderProvider
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
Public Class FlexLayoutPanel
    Inherits Panel
    Implements IExtenderProvider
```

{% endtab %}
{% endtabs %}

The [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md) can arrange its child controls using the layout engine specified in [LayoutStyle](#layoutstyle). When the value is set to [Default](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields), the child controls are arranged using the default layout engine, using their location, dock style and anchor properties. When the value of [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields), child controls are arranged horizontally in a single row. When the value of [LayoutStyle](#layoutstyle) is set to [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields), child controls are arranged vertically in a single column. Uses the following properties of the child controls:

* [Margin](/api/wisej.web/general/control.md#margin) Increases the space around the control.
* AlignY Aligns the control vertically within its parent using one of the [VerticalAlignment](/api/wisej.web/enumerations/wisej.web.verticalalignment.md) values. It's used only when [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields).
* AlignX Aligns the control horizontally within its parent using one of the [HorizontalAlign](#horizontalalign) values. It's used only when [LayoutStyle](#layoutstyle) is set to [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields).
* FillWeight Stretches the control's width or height to use the remaining space in the parent [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md) proportionally, according to the fill weights of all the children.
* [MinimumSize](/api/wisej.web/general/control.md#minimumsize) Enforces the minimum size of controls stretched using the FillWeight value.
* [MaximumSize](/api/wisej.web/general/control.md#maximumsize) Enforces the maximum size of controls stretched using the FillWeight value.

Uses the following properties of the parent [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md) control:

* [HorizontalAlign](#horizontalalign) Aligns all the child controls horizontally using one of the [HorizontalAlignment](/api/wisej.web/enumerations/wisej.web.horizontalalignment.md) values. If any of the child control indicates a FillWeight value greater than 0, the remaining space is used to stretch the control and no alignment can take place since there is no remaining space. When [LayoutStyle](#layoutstyle) is set to [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields), the value of [HorizontalAlign](#horizontalalign) is the default for the AlignX property of child controls.
* [VerticalAlign](#verticalalign) Aligns all the child controls vertically using one of the [VerticalAlignment](/api/wisej.web/enumerations/wisej.web.verticalalignment.md) values. If any of the child control indicates a FillWeight value greater than 0, the remaining space is used to stretch the control and no alignment can take place since there is no remaining space. When [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields), the value of [VerticalAlign](#verticalalign) is the default for the AlignY property of child controls.
* [Spacing](#spacing) Increases the horizontal or vertical space between the child controls. The value in pixels of [Spacing](#spacing) is added to the control's [Margin](/api/wisej.web/general/control.md#margin).
* [Padding](/api/wisej.web/general/control.md#padding) Increases the distance between the child controls and the borders of the parent panel.

## Constructors

### ![](/files/hsR4ok3152WyAf8J2C1u) FlexLayoutPanel()

Initializes a new instance of the [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md) class.

### ![](/files/hsR4ok3152WyAf8J2C1u) FlexLayoutPanel(controls, layout)

Initializes a new instance of the [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md) class with the specified settings.

| Name         | Type                                                                                      | Description                                                                                |
| ------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| **controls** | [Control\[\]](/api/wisej.web/general/control.md)                                          | An array of [Control](/api/wisej.web/general/control.md) objects to be added to the panel. |
| **layout**   | [FlexLayoutStyle](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md) | Initial [LayoutStyle](#layoutstyle).                                                       |

### ![](/files/hsR4ok3152WyAf8J2C1u) FlexLayoutPanel(location, size, controls, layout)

Initializes a new instance of the [FlexLayoutPanel](/api/wisej.web/containers/flexlayoutpanel.md) class with the specified settings.

| Name         | Type                                                                                      | Description                                                                                |
| ------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| **location** | [Point](https://docs.microsoft.com/dotnet/api/system.drawing.point)                       | The location of the panel on its parent control.                                           |
| **size**     | [Size](https://docs.microsoft.com/dotnet/api/system.drawing.size)                         | The size of the panel.                                                                     |
| **controls** | [Control\[\]](/api/wisej.web/general/control.md)                                          | An array of [Control](/api/wisej.web/general/control.md) objects to be added to the panel. |
| **layout**   | [FlexLayoutStyle](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md) | Initial [LayoutStyle](#layoutstyle).                                                       |

## Properties

### ![](/files/hsR4ok3152WyAf8J2C1u) HorizontalAlign

[HorizontalAlignment](/api/wisej.web/enumerations/wisej.web.horizontalalignment.md): Determines the horizontal alignment of the child controls when [LayoutStyle](#layoutstyle) is set to [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields). (Default: `Left`)

### ![](/files/hsR4ok3152WyAf8J2C1u) LayoutEngine

[LayoutEngine](https://github.com/iceteagroup/wisej-docs-api/blob/v4.0/wisej.web.layout/containers/layoutengine/layoutengine/README.md): Returns the control's layout engine.

### ![](/files/hsR4ok3152WyAf8J2C1u) LayoutStyle

[FlexLayoutStyle](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md): Determines the layout engine to use to arrange the panel's child controls. (Default: `Default`)

* [Default](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields) Controls are arranged using the default layout engine and according to their location, dock style, and anchoring.
* [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields) Controls are arranged horizontally in a single row according to their width, alignment, fill weight, and margin. The control's location, dock style, and anchoring are ignored.
* [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields) Controls are arranged vertically in a single column according to their height, alignment, fill weight, and margin. The control's location, dock style, and anchoring are ignored.

### ![](/files/hsR4ok3152WyAf8J2C1u) Spacing

[Int32](https://docs.microsoft.com/dotnet/api/system.int32): Returns or sets the additional space, in pixels, between child controls when [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields) or [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields). The default value is 10. (Default: `10`)

### ![](/files/hsR4ok3152WyAf8J2C1u) VerticalAlign

[VerticalAlignment](/api/wisej.web/enumerations/wisej.web.verticalalignment.md): Determines the vertical alignment of the child controls when [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields). (Default: `Top`)

## Methods

### ![](/files/hsR4ok3152WyAf8J2C1u) GetAlignX(control)

Determines the horizontal alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields).

| Parameter   | Type                                         | Description |
| ----------- | -------------------------------------------- | ----------- |
| **control** | [Control](/api/wisej.web/general/control.md) |             |

**Returns:** [HorizontalAlignment](/api/wisej.web/enumerations/wisej.web.horizontalalignment.md).

### ![](/files/hsR4ok3152WyAf8J2C1u) GetAlignY(control)

Determines the vertical alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields).

| Parameter   | Type                                         | Description |
| ----------- | -------------------------------------------- | ----------- |
| **control** | [Control](/api/wisej.web/general/control.md) |             |

**Returns:** [VerticalAlignment](/api/wisej.web/enumerations/wisej.web.verticalalignment.md).

### ![](/files/hsR4ok3152WyAf8J2C1u) GetFillWeight(control)

Determines whether to proportionally stretch the child within the panel to use the remaining space.

| Parameter   | Type                                         | Description        |
| ----------- | -------------------------------------------- | ------------------ |
| **control** | [Control](/api/wisej.web/general/control.md) | The child control. |

**Returns:** [Int32](https://docs.microsoft.com/dotnet/api/system.int32). The fill weight value associated with the control.

The FillWeight property defines the relative width or height of a control managed by the [Panel](/api/wisej.web/containers/wisej.web.panel.md). The default value is 0 and the maximum value is 100.

### ![](/files/hsR4ok3152WyAf8J2C1u) SetAlignX(control, value)

Determines the horizontal alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Vertical](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields).

| Parameter   | Type                                                                                | Description |
| ----------- | ----------------------------------------------------------------------------------- | ----------- |
| **control** | [Control](/api/wisej.web/general/control.md)                                        |             |
| **value**   | [HorizontalAlignment](/api/wisej.web/enumerations/wisej.web.horizontalalignment.md) |             |

### ![](/files/hsR4ok3152WyAf8J2C1u) SetAlignY(control, value)

Determines the vertical alignment of the child control within the panel when [LayoutStyle](#layoutstyle) is set to [Horizontal](/api/wisej.web/containers/flexlayoutpanel/wisej.web.flexlayoutstyle.md#fields).

| Parameter   | Type                                                                            | Description |
| ----------- | ------------------------------------------------------------------------------- | ----------- |
| **control** | [Control](/api/wisej.web/general/control.md)                                    |             |
| **value**   | [VerticalAlignment](/api/wisej.web/enumerations/wisej.web.verticalalignment.md) |             |

### ![](/files/hsR4ok3152WyAf8J2C1u) SetFillWeight(control, value)

Determines whether to proportionally stretch the child within the panel to use the remaining space.

| Parameter   | Type                                                        | Description                   |
| ----------- | ----------------------------------------------------------- | ----------------------------- |
| **control** | [Control](/api/wisej.web/general/control.md)                | The child control.            |
| **value**   | [Int32](https://docs.microsoft.com/dotnet/api/system.int32) | The fill weight value to set. |

The FillWeight property defines the relative width or height of a control managed by the [Panel](/api/wisej.web/containers/wisej.web.panel.md). The default value is 0 and the maximum value is 100. **Throws:**

* [ArgumentOutOfRangeException](https://docs.microsoft.com/dotnet/api/system.argumentoutofrangeexception) The value is less than 0 or greater than 100.

## Implements

| Name                                                                              | Description                                                                                                           |
| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| [IUserData](/api/wisej.web/interfaces/wisej.web.iuserdata.md)                     | Provides access to the `UserData` and `Tag` properties associated to the component implementing this interface.       |
| [IBindableComponent](/api/wisej.web/data-binding/wisej.web.ibindablecomponent.md) | Bindable components implement this interface.                                                                         |
| [IDropTarget](/api/wisej.web/interfaces/wisej.web.idroptarget.md)                 | Controls that support drag & drop operations implement this interface.                                                |
| [IImage](/api/wisej.web/interfaces/wisej.web.iimage.md)                           | Provides access to common image properties across the controls that implement this interface.                         |
| [IWisejComponent](/api/wisej.core/interfaces/wisej.core.iwisejcomponent.md)       | All wisej components implement this interface.                                                                        |
| [IWisejControl](/api/wisej.core/interfaces/wisej.core.iwisejcontrol.md)           | All wisej controls derived from the [Control](/api/wisej.web/general/control.md) class must implement this interface. |
| [IWisejSerializable](/api/wisej.core/interfaces/wisej.core.iwisejserializable.md) | Allows an object to serialize itself.                                                                                 |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.