Quick Start
New to Flex Layouts? This step-by-step guide is the best place to start. We’ll go through step-by-step instructions to help you create a simple web page. All the resources used in the page are listed below in the resources section
Step-by-step design
Step 1 — Create a new Flex Layout
1. Launch QuarkXPress 2019 and create new Flex project by going to File > New > Project.. .
2. In New Project dialog, select Layout Types as Digital from the drop-down and then Flex  from next drop-down.
Screen Shot 2019-07-03 at 3.23.23 PM.png
This will open a new project window with flex layout. This layout will have 12 vertical grid columns as specified in the project dialog, distributed over 1280 px. You will also see a dragger on the right side of the layout canvas, which you can hold and drag to either side to see how grid behaviors when you increase or decrease the canvas width. In case you drag the canvas to more than 1280 px, the grid will still occupy 1280px space, but will be automatically center aligned. And if you drag canvas to occupy less than 1280px, then the grid will start shrinking.
The Canvas
The canvas area represents the device width that will be available to our design output when user will view it on different devices. The dragger helps us visualize our design under different device width conditions by allowing the canvas to grow and shrink.
Screen Shot 2019-07-04 at 7.59.54 AM.png
The Grid
The grid area represents our design space, which we will use to create our design using grid guides.
Screen Shot 2019-07-04 at 3.03.32 PM.png
On small devices, grid shrinks and components respond to this change
Screen Shot 2019-07-04 at 3.03.06 PM.png
Design when viewed on a device with a width equal to that of grid
Screen Shot 2019-07-04 at 3.03.45 PM.png
When viewed on wider devices, the grid and design within stays intact and gets center justified
Step 2 — Create a layout structure using Layouts Block palette
1. Open Layout Blocks palette from Windows > Layout Blocks menu option, if it is not already open.
2. From Layouts tab of this palette drag Layout 3 onto new project canvas
This will give us a layout structure that we can use for our web page. Layout 3  contains 3 sections each corresponding to the header, main and footer section.
Screen Shot 2019-07-03 at 3.37.00 PM.png
Step 3 — Build page header
1. You will see three gray boxes, each representing header column, main section column, and footer column.
Note: Make sure to turn on Visual Indicator from View  menu. Turning on visual indicators will allow you to see empty boxes on the canvas represented by gray color.
2. Select the top gray box and open measurements palette.
3. Goto the Flex tab of the Measurements  palette and change the width of the header column from 8.33% to 100%.
Note: Though column width was mentioned 8.33% but still it was occupying 100% of its parent width, it is because of the Grow property with value 1 defined for it , which allows an item to additionally acquire any vacant space in its parent.
6. Now with header column selected, press cmd+d (mac)/ctrl+d (windows) to duplicate it. This will create another column below the selected column.
Try: If you try to duplicate the header column without changing its width to 100%, then the new column will appear side by side. You can undo the duplication and width size change to try it yourself. You can do multiple duplicates to create more columns and to remove them just select the last column and start pressing delete ( To remove components make sure you are in Item mode)
7. Now from the Basic tab of Layouts Block palette, drag Text (Padded) component into the first column. This component is a text box wrapped into another container with some default padding.
8. Click the gray box (Text Box) of the component we have just dropped, and add some content into it using the content tool. Let’s add “Spirit of Adventure” and apply some style on it.
9. Drag Component 5 from the Components tab of Layouts Block palette into the second header column. This component has three different text boxes with their padding. These three text boxes will act  as menus for our page.
Try: You can add more text boxes(menus) by selecting the parent padded box ( Padded Column) of any of the text box and pressing cmd+d multiple time to duplicate the text boxes. As explained below, you can either directly select the parent padded column box or can select it through the Layout Blocks’ breadcrumb control.
Containment Hierarchy through Breadcrumb
Selecting a box on layout will show it’s parent hierarchy on the bottom of Layouts Blocks palette in the form of breadcrumbs. Each breadcrumb represents a box on the layout and show the name of that box. These names represent tentative responsibilities that are assigned to various boxes in each block of our layout blocks palette components. Hovering over this breadcrumb hierarchy on the layout blocks palette will highlight the corresponding box on the layout, and clicking on any of these breadcrumbs will select the corresponding box on the layout.
Screen Shot 2019-07-03 at 5.43.34 PM.png
10. Select the nearest ancestor of text box called Component, then go to Flex tab of measurement’s palette and change the Justify property value to Center. This will center the menus(padded text boxes) relative to our page grid.
11. Also change the background color of the selected Component, from colors palette to say 80% of Black.
12. Add some text into the menus(text boxes) e.g. Home, Book now, Contact us, and apply some appropriate styling
13. Select the padded column of the first menu text box (i.e. the immediate parent of the menu text box), by holding command key also multi-select padded columns of other two menu text boxes. With all the padded columns selected, goto Border  tab of measurements palette and apply left and right borders to these boxes.
Screen Shot 2019-07-04 at 3.08.32 PM.png
Figure  (Step 3)  — Layout after Step 3
Step 4 — Decorate the main section
1. Select the Column  (gray box) of the main section on our layout, goto Flex tab of measurements palette and set Min-H (minimum height) of the box to say 400px.
Note: You will also notice that this box already has Height  set to 400px. This height was automatically set, just to give a feel of layout structure and will revert to auto as soon as we add some component from layout blocks into it.
2. Now select the Row  (immediate parent container of the selected column), and import a background image either from File > Import... or by command+E
3. Change the tool from Picture Content Tool to Item Tool from Tools  palette.
Note: The picture by default fills the Row container. It is because by default any background image to a container is set to fill the container. You can change it to Fit instead of Fill from Container tab of Measurements palette.
4. From the Basic tab of Layouts Blocks palette, drag the Text (Padded) component onto the main section Column.
5. Let’s add some text into this text box e.g. “Need a Break” + line break  + “Want to travel?”, and style it.
6. Select the Padded Column of the text box, and reset it’s width to 50% of its parent Column  container box, by dragging it’s right edged box handle to align it to the center grid line.
Resizing the box
There are two ways we can resize a box within a container.
1. Using the Width and Height property of a box from the Flex tab.
2. Using box handles to resize the box.
Note: When we use box handles to resize box width, then Grow property of the box gets reset (to value 0 ).
Note: If we try to resize the height of the box, then the height value changes from auto to whatever height you dragged to. Generally, it is not recommended to set fixed height for any box, as it might break your responsive layout under some conditions.
7. Select the Column which is an immediate parent of Padded Column and from Container tab set the Alignment and Row Alignment to Center .
8.  To eliminate the gap between main section and Menu above, select the main section Row and change its top margin to value 0, either from Flex Tab , or by visually dragging the red line of top margin on canvas.
Margins & Paddings
Margins are outsets for a box and are applicable for all flex items. They can be defined using Margins property on the Flex tab .
Padding is like insets, and are only applicable for containers. They can be defined using Padding property on the Container tab .
Both Margins and Paddings can, not only be changed from measurement tabs but can also be changed visually on the layout. If View > Guides  are on, then margin applied on a box is shown in pink color and padding is showing in green color. Hovering over these visual margins and padding area will show a red guide, which you can be dragged to increase/decrease corresponding margins/padding.
While dragging this red guide, and holding command  key will only adjust the single selected edge.
Holding command + shift while dragging, will adjust selected area(margin/padding) and it’s opposite edge’s corresponding area(margin/padding).
Screen Shot 2019-07-04 at 3.17.17 PM.png
Screen Shot 2019-07-04 at 3.05.46 PM.png
Figure (Step 5)  — Layout after Step 4
Screen Shot 2019-07-05 at 12.43.10 PM.png
Video recorded tutorial of the layout