{% extends 'templates/document.html' %} {% import 'components/Document/Head.html' as Head %} {% import 'components/Sidebar/Sidebar.html' as Sidebar %} {% import 'components/PageHeader/PageHeader.html' as PageHeader %} {% import 'content/Swappable/Flexbox/Flexbox.html' as Flexbox %} {% set ViewAttr = { id: 'Flexbox', parent: 'Swappable', child: 'Flexbox', subheading: 'Maintaining layout while swapping direct children can be challenging. This example solves the problem using nth-child and adjacent sibling selectors.' } %} {% block PageId %}{{ ViewAttr.id }}{% endblock %} {% block head %} {{ Head.render(ViewAttr) }} {% endblock %} {% block sidebar %} {{ Sidebar.render(ViewAttr, DataPages) }} {% endblock %} {% block main %} {{ PageHeader.render(ViewAttr) }} {{ Flexbox.render(ViewAttr.id) }} {% endblock %}