Throughout these code examples, we're going to have a very simple server.R file, which will not change. It simply draws a table and nothing else. We will therefore also break the habit of the rest of this book and use the single app.R file structure for these examples, since they are so small. With that in mind, let's look at the first application, which will be flowLayout():

server = function(input, output) {
 
  output$table = renderTable({
 
    head(iris)
  })
}
ui = flowLayout(
 sliderInput("slider", "Slider", min = 1, max = 100, value = 50),
 textInput("text", "Text"),
 tableOutput("table")
)
shinyApp(ui, server)

In flowLayout, elements are ordered left to right, top to bottom. Resizing the window causes the elements to reorder themselves so they fit, left to right, top to bottom. Download the code example and try it for yourself. Throughout this section, it's a good idea to download the examples and try them out.

The next example is verticalLayout(). In this and subsequent code examples, we will not bother with the server and shinyApp() code since they will never change. We will just look at the value for ui in each case:

ui = verticalLayout(
  sliderInput("slider", "Slider", min = 1, max = 100, value = 50),
  textInput("text", "Text"),
  tableOutput("table")
)

As the name suggests, it merely arranges elements vertically. As many as you supply. Here it is in action:

The final simple function is splitLayout(). It takes as many elements as you give it and arranges them on the page left to right. By default, each is given the same width but you can optionally set the width for each manually. Here is an example:

ui = splitLayout(
  cellWidths = c("20%", "20%", "60%"),
  sliderInput("slider", "Slider", min = 1, max = 100, value = 50),
  textInput("text", "Text"),
  tableOutput("table")
)

In this case, we have set the widths to better accommodate the table (which, as you can see, is given 60% of the width). It's superficially similar to flowLayout(), in that if you lay out an application with both, they may look similar at first, but the two critical differences are that splitLayout() allows you to define the width of each widget, and that if you resize the window, flowLayout (true to its name) will flow onto the next row, whereas splitLayout() will just cramp everything up, as shown in the following screenshot: