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


---

# 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.adapptio.com/working-with-adapptio/how-to/layouts/stretched-layout-in-row.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.