Flexible Content is a way of composing content using multiple, selectable, orderable field types in a content area.  It's become popular with clients and content editors and is available in most modern CMS.  Let's  have a look at how to do it with Statamic, a modern file based CMS.  Statamic is a great CMS with a lot of advantages over more normal database driven CMS including ease of development, deployment and content editing. 

Ill build the flexible content field using a combination of a Replicator field and Bard fields. 

The replicator allows adding multiple Sets of fields and will represent the sections with configurable options to control the look and column count. 

Bard is Statamic's content composer field.  Similar to Replicator you can add multiple sets of fields to build up a content model. Any combination is possible, but we will start with Editor (copy text), Image, Video, Gallery and Blockquote. This is simple to do, just adding each element using the CP fieldset area. Behind the scenes it is editing the YAML configuration files, which is awesome because they are easy to inspect, copy and deploy via GIT.

Eventually, we end up with this Replicator set.  

Next, we might want to be able to build a two-column section.  We can do that by adding the Replicator set and then rather than building the Bard features all over again, just pop into the YAML and copy paste the Bard configuration from the Full column set to the Two column set.  It's a nice example of how easy a file based system can be to work with.

Pop back into CP, and you can admire your two column Bard enabled Set.

Thats the content modeling done. It's that easy! Now we can go over to the about page and enter some content.  

Each Part of the replicator content and bard content collapses neatly, with a representation of the content.  This allows editors to visualise their content without it becoming overwhelming. 

Click On Full or FiftyFifty to add sections with the corresponding columns.  When you create a new line within bard, It allows you to add any of the content sets you defined in the previous step, in any order.

 OK, we are done with the CP.  Now we need to do some code.  Fortunately, it's pretty easy to write templates using Statamic's Antlers templating language.

 themes/redwood/templates/about.html:

{{ replicator }}
	{{ if type == "full" }}
		
			{{ flexible_content }}
			 {{ partial src="sets/{type}" }}
			{{ /flexible_content }}

	 {{ elseif type == "fiftyfifty" }}	
// TBD
	{{ /if }}
{{ /replicator }}

This loops through the replicator, and outputs the sets it finds.  The first one, "full" is our full width section.  Inside that is the Bard field "flexible_content" which holds each content set.  We can output those by finding their partial based on the type. 

Not forgetting the two column output, we just need to add a bit more code to do the same for each of the Left and Right columns:
 

<div class='cols'>
  <section class='col'>
    <div class="content">
    {{ left }}
     {{ partial src="sets/{type}" }}
    {{ /left }}
    </div>
 </section>
 <section class='col'>
   <div class="content">
     {{ right }}
     {{ partial src="sets/{type}" }}
    {{ /right }}
  </div>
 </section>
</div>

The partials for each type in sets can be very simple snippets.  The most complex in this example is gallery:

<div class="tiles">
{{ gallery }}

    <img class='item' src='{{ glide src="{{ value }}"
         width="300" height="300" }}'>
{{ /gallery }}
</div>

 A bit of CSS to lay it out in style.css:

.cols{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.col{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.content{
  padding: 1em;
}
.bard-image{
  max-width: 100%;
}

And bingo, we have our content outputted. 

And that's a wrap.  Flexible content, with options for single or double column layouts.  From here, it would be easy to add background images or colors to sections or add more layout options. Three column, 60/40 columns. Whatever you can dream up and matches the site requirements.