> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/how-to/layouts/stretched-layout-in-row.md).

# Stretched Layout in Row

### The Goal

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

![One Row Stretched Layout Application](/files/V7FKSXS1EqTMWcbJvGqt)

### 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 %}