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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/layouts/stretched-layout-in-row.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.