> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/layout/flexible-field.md).

# Displaying Flexible field

The [Flexible Content field](https://wplake.org/blog/acf-flexible-field/) is a unique ACF field type that is not available in other meta vendors. It provides a versatile, block-based editor, allowing for structured content creation.

With the Flexible Content field, you can define multiple layouts and sub-fields within a single field, giving you complete control over the content structure. Editors can easily choose and arrange these layouts within the editor interface.

{% hint style="warning" %}
Pay attention: the Flexible field is supported only in [Advanced Views Pro](https://advanced-views.com/pro/). 
{% endhint %}

## 1. How to display a Flexible field

To display a flexible field, follow these steps:

a) Create a new *Layout* ('Primary'):

1. On the Fields tab, click the 'Add field' button.
2. Choose the flexible field.
3. After selecting the flexible field, you'll see a new 'Sub-fields' tab appear in the row. Click on it.
4. Select all the layouts you want to display.
5. Save the current *Layout*.

b) Create a new *Layout* ('Internal'):

1. On the Fields tab, choose your group in the 'parent group' field.
2. In the parent field, select the 'flexible layout' from the previous step.
3. Click the 'Add field' button and assign all the layout fields you want to display.
4. Save the current *Layout*.

c) Amend the 'Primary' *Layout*:

1. Find the 'flexible' field in the fields list.
2. Open the 'Sub-fields' tab and locate the target 'layout'.
3. Fill out the "Field Layout" setting by choosing the 'Internal' *Layout*.
4. Save the *Layout*, copy its [embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
5. Embed *Layout*: paste the shortcode inside the target place

You're done! 

{% hint style="info" %}
Advanced Views will automatically retrieve the set of chosen layouts on the page and pass the data of every layout to the specific *Layout* defined for each layout. This process occurs dynamically, granting editors the freedom to customize content without manual intervention.
{% endhint %}

## 2. Render options

### 2.1) Items List

To display all the items in a single row, you can use the CSS [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox):

```css
#layout__flexible-content {
display: flex;
gap: 10px;
}
```

### 2.2) Items Grid

To display all the items as a grid, you can use the [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid):

```css
#layout__flexible-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
 }

@media screen and (min-width:992px) {
 #layout__flexible-content {
  grid-template-columns: repeat(4, 1fr);
 }
}
```