# Stretched Layout in Row

### The Goal

Design a *Stretched Layout* in one row, containing *Text* and *Menu Button* components.

![One Row Stretched Layout Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FNHUiwSD2JRXolSddRD6k%2Fimage.png?alt=media\&token=8a9d31f9-23eb-4db2-93ca-e6eac3f9cd11)

### The Description

Any components sorting in rows can have their *Item Flex* properties; if it's required to have components responsively on both sides, the middle one has to be stretched.

### The Knowledge You Will Get

1. How to set up *Stretched Layout*.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[`cntMain`]
    * [ ] Container\[`cntRow`]
      * [ ] Text\[`text1`]
      * [ ] Spacer\[`spacer1`]
      * [ ] Menu Button\[`menuButton1`]
        {% endtab %}
        {% endtabs %}

### 1. Desing a Stretched Layout

*Stretched Layout* will be separated into two *Containers*; one would be stretched as a *Main*; the second would be stretched as a *Row*.

1. Place in a new **Container**, name it `cntMain`, and set up its *Item Flex* -> `Stretched`; Padding -> `X-Wide`
2. Place in a second **Container** with the following setup: *ID* -> `cntRow`; *Flow* -> `Into row`; *Vertical Alignment* -> `Middle`
3. Into `cntRow` place three following components, keep their IDs, and configure them properly:
   1. **Text** -> *Item Flex* -> `None`; *Value* -> "`Some Text Here`"; *Font Size* -> `Medium`
   2. **Spacer** -> *Item Flex* -> `Stretched`; *Foreground* -> `TRANSPARENT`
   3. **Menu Button** -> *Item Flex* -> `None`; *Font Size* -> `Medium`

### The Conclusion

Stretching *Layout components* need some practice to understand. If more than two stretched layouts are in a *one-parent*, they would split their space between them.

{% hint style="info" %}
Follow up on our *Stretched Layout in Row* tutorial <https://youtu.be/lnVZCyJBwhw>
{% endhint %}