From flexi-3.9 it is possible to create own gallery layout using own css,php codes. This way all developers can create advance gallery backed by flexi settings.

Below is the HTML code which generated above fig-1. 
<div class="fl-columns">
  <div class="fl-column fl-is-narrow fl-is-full">
    <div id="flexi_main_loop">

      <div class="fl-column">
        <div class="fl-box">
          <p class="fl-title fl-is-5">Title 1</p>
          <p class="fl-subtitle"> Some information of title 1</p>
        </div>
      </div>
      <div class="fl-column">
        <div class="fl-box">
          <p class="fl-title fl-is-5">Title 2</p>
          <p class="fl-subtitle"> Some information of title 2</p>
        </div>
      </div>

    </div>
  </div>
</div>

Now our target is to convert above HTML code into flexi compatible gallery layout.
We need to break above code into 3 parts.
header.php, loop.php, footer.php

header.php 
Place any PHP variables and function at this file. This file is excecated only once before loop starts. 
Variable mentioned here is available into loop.php & footer.php too. 
------------------------------
<div class="fl-columns">
  <div class="fl-column fl-is-narrow fl-is-full">
    <div id="flexi_main_loop">

loop.php 
Place any PHP variables specific to post_ID. Variable mentioned here only for current executed post. Repeated html code should be placed here. 
------------------------------
<?php
//Contains post variables into array.
$data = flexi_image_data('thumbnail', get_the_ID(), $popup);
?>
<div class="fl-column">
  <div class="fl-box">
    <p class="fl-title fl-is-5"><?php echo $data['title']; ?></p>
    <p class="fl-subtitle"> <?php echo flexi_excerpt(20); ?></p>
  </div>
</div>

footer.php 
Executed only once at the end of the loop.  
------------------------------
</div>
</div>
</div>
<div style="clear: both; display: block; position: relative;"></div>
<?php

//Executed if no records are found
if (0 == $count) {
    echo '<div id="flexi_no_record" class="flexi_alert-box flexi_notice">' . __('No records', 'flexi') . '</div>';
}

?>

For example we want to create above layout as on fig-1. Let’s name this layout as demo1. Layout name should always be unique, else it will overwrite the existing layout with same name.

All above 3 files will be dynamically work as single file.

1st is header.php: Only executed once and placed at the top. PHP function and variable should be declared here.
2nd is loop.php: Only one part of code is written. This code will be executed again and again in a loop with different post. Variable mentioned on header.php can be accessed from here.
3rd is footer.php: Only executed only once at the end of the loop file.
4th is style.css: Used to write own CSS style
5th is screenshot.png: Used to display thumbnail on admin layout page.

Now let’s create a package file

As we are creating a layout named demo1 .
1- Create a folder demo1. Under demo1 create folder gallery (Since you are creating gallery). Under gallery create folder demo1
demo1 > gallery > demo1
2- Copy all 5 files into it.
3- Go to parent folder demo1 ( where you can see gallery folder)
4- Create a zip file by selecting all folder. File name should be flexi_demo1.zip (Where demo1 is the layout name)

Package is created and let’s import it into flexi plugin

1- Login into wordpress admin dashboard.
2- Go into Under Flexi -> Dashboard -> Layout Tab
3- Select file flexi_demo1_zip and click on button “Import”
You will able to see the new layout named demo1 below with delete button.

Note: If you already imported layout and you edit the file locally and directly overwrite the files via FTP at wp-content\plugins\flexi\public\partials\layout\gallery\xxx . It will not get updated. This folder is continuously updated from original folder previously imported. To overwrite you must upload at wp-content\uploads\flexi\flexi_gallery\xxx.

style.css
While creating this file the version number is mentioned at the first line of the file. This will help us to determine for which flexi version this has been designed.
URL should point to the source code URL path

/*!
version=3.9
url=https://github.com/gupta977/flexi_layout/tree/master/demo1
*/
css rules goes here