LogoLogo
ProductsPricingGlossary Launch Acho
  • 🎉Welcome
  • Introduction
  • What is Acho?
  • How does Acho work?
    • Proof of Concept (PoC)
  • App Builder
    • Get Started
    • Core Concepts
    • Overview
    • App construction
      • App Configuration
      • Pages
      • Interactions
        • Add an interaction
        • Add conditions to interactions
        • Event payload
        • Ordering interactions with action flow
        • Transformer
        • Actions
          • Navigation
          • Element
          • Data Source
          • App
          • Page
          • API Service
          • Database
          • Media Service
      • Table
      • Metric
      • Query
      • Data Store
      • Elements
        • Table & Chart
          • Searchable Table
          • Table
          • Chart
          • Score Card
        • Form Elements
          • Form
          • Search Bar
          • Checkbox
          • Date Picker
          • Custom Form
          • Input
          • Multiselect
          • Radio Button
          • Radio List
          • Rich Text Editor
          • Select
          • Switch
          • Textarea
          • Upload
        • Web Elements
          • Badge
          • Button
          • Clickable
          • Collapse Menu
          • Divider
          • Icon
          • Image
          • Link
          • Message
          • Modal
          • Notification
          • Pagination
          • Popover
          • Rate
          • Rich Text
          • Tabs
          • Text
        • Layout Elements
          • Container
          • List
        • Advanced elements
          • Code Block
          • Condition
          • Print
        • CSS Styles
          • General techniques
          • Layout
          • Spacing
          • Size
          • Position
          • Typography
          • Background
          • Border
          • Effect
        • Form Check
        • Tooltip
      • Accessors
      • Plugin Store
    • Popular Use Cases
      • Build a chart from Table Nodes
      • Create a table
      • Create a list
      • Create a filter
      • Create a search bar
      • Use Custom Form Container to collect user inputs
      • Drill down on a table
      • Download file from query node
      • Set loading animations
      • Modify a database
      • Navigate to a different page
      • Set up dynamic routing
      • Update app data using accessors
      • Create a Chart with Code Block and D3 Library
      • Rich text and rich text editor
      • Send an Email via Mailjet Plugin
    • Preview
    • Publish
      • Embed published app on website
    • Version Control
    • App User Management
      • Onboarding Page
      • Sign in page
      • Guest Isolation and Private Session
    • Theme
    • FAQ
  • Acho Studio
    • Quick Start
    • Resources
      • Add a resource
      • Supported data sources
        • Airtable
        • Amazon Ads
        • Amplitude
        • Amazon Seller Partner
        • Apify Dataset
        • Appstore
        • Asana
        • API Connector
        • API Template
        • AWS CloudTrail
        • Azure Table Storage
        • Batch Files
        • Bamboo HR
        • BigCommerce
        • BigQuery
        • Bing Ads
        • Braintree
        • Cart.com
        • Chargebee
        • Chargify
        • Chartmogul
        • Clickhouse
        • Close.com
        • CockroachDB
        • Confluence
        • Customer.io
        • Delighted
        • Dixa
        • Drift
        • Facebook Marketing
        • Freshdesk
        • Freshsales
        • Freshservice
        • GitHub
        • GitLab
        • Google Ads
        • Google Analytics
        • Google Sheets
        • Google Search Console
        • Greenhouse
        • Harness
        • Harvest
        • HubSpot
        • IBM Db2
        • Instagram
        • Intercom
        • Iterable
        • Jenkins
        • Jira
        • Kafka
        • Klaviyo
        • Kustomer
        • Lemlist
        • Lever Hiring
        • LinkedIn Ads
        • Linnworks
        • Mailchimp
        • Marketo
        • Microsoft Teams
        • Mixpanel
        • Monday
        • MongoDB
        • MySQL
        • My Hours
        • NetSuite
        • Notion
        • Okta
        • OneDrive
        • OneSignal
        • Oracle DB
        • Outreach
        • PagerDuty
        • Paypal Transaction
        • Paystack
        • Pipedrive
        • PersistIq
        • Pinterest
        • Plaid
        • PostgreSQL
        • PostHog
        • PrestaShop
        • Qualaroo
        • QuickBooks
        • Recharge
        • Recurly
        • Remote File
        • S3
        • Salesforce
        • Salesloft
        • SearchMetrics
        • Sendgrid
        • Sentry
        • Short.io
        • Shopify
        • Single File
        • Slack
        • Smartsheets
        • Snapchat Marketing
        • Snowflake
        • SQL Server
        • Square
        • Stripe
        • SurveyMonkey
        • Tempo
        • TikTok Marketing
        • Trello
        • Twilio
        • Typeform
        • VictorOps
        • WooCommerce
        • YouTube Analytics
        • Zendesk Chat
        • Zendesk Sunshine
        • Zendesk Talk
        • Zendesk Support
        • Zenloop
        • Zoho CRM
        • Zoom
        • Zuora
    • Data Prep (Projects)
      • Create a Data Prep Project
        • Create a table tab
        • Copy a table tab
        • Hide a table tab
      • Apply an action
        • View
          • Hide Columns
          • Filter
          • Sort
          • Cut
          • Rename
          • Move Column
        • Combine Tables
          • Join
          • Union
        • Transformation
          • Pivot Table
          • Unpivot
        • Data Cleaning
          • Cleanse
          • Replace
          • Change Type
          • Deduplicate
          • Split
          • Flatten
        • Tools
          • Formula
          • SQL Editor
            • SQL Editor Queries
            • All functions in Formula/SQL
              • Mathematical Functions
              • String Functions
              • Date Functions
              • Datetime Functions
              • Time Functions
              • Timestamp Functions
              • Conditional Functions
              • Type Conversion
              • Other Functions
        • Reserved Keywords
      • Pipeline
      • Edit your pipelines
      • Generate column summary for inspection
      • Use URL to access and share your project
      • Write a description for your project
      • Delete a resources/project/tab
    • Data Flow
      • Export data
        • Download CSV files
        • Excel Connector
        • Google Sheets Connector
        • Embed a table on your website
          • Data Usage Agreement
        • Apache Superset
        • Chartio
        • Looker
        • Metabase
        • Power BI
        • Qlik
        • Tableau
        • MongoDB
        • MySQL
        • MSSQL
        • Snowflake
        • PostgreSQL
        • BigQuery
    • Set up Data Sync
    • FAQ
  • Organization
    • Get started
    • Create an organization
    • Invite people to your organization
    • Share your resources
    • Share your projects
    • Share your apps
    • Change payment method on file
  • FAQ
    • I can't find data after uploading a big CSV file
Powered by GitBook
On this page
  • Display
  • Direction
  • Justify
  • Align
  • Flex wrap
  • Grow
  • Shrink
  • Column Gap
  • Row Gap

Was this helpful?

  1. App Builder
  2. App construction
  3. Elements
  4. CSS Styles

Layout

PreviousGeneral techniquesNextSpacing

Last updated 2 years ago

Was this helpful?

Display

Display is a property that specifies the type of layout a certain HTML element should have. The display property is a crucial aspect of web design, as it determines how an element is positioned and laid out on a web page. The value of the display property can be set to either Inline, inline-block, block, none, and flex are different display values for HTML elements. In practical use with Acho App builder, flex is the most powerful and often used one.

  • Inline elements only occupy as much space as their content and do not cause a new line to start. Examples of inline elements include spans, links, and images.

  • Flex elements define a flex container and allow direct children to be laid out in a flexible way, either in a row or a column. This display value is useful for creating responsive layouts that can adjust to different screen sizes and devices.

  • Block elements occupy the full width of their parent container and create a new block formatting context. This means that they start on a new line and stack vertically, one after the other. Examples of block elements include headings, paragraphs, and divs.

  • Inline-block elements are similar to inline elements, but they can have a specified width and height and can be treated as a block element for formatting purposes.

  • None elements do not appear on the page and do not take up any space.

Direction

The Direction property only works when the display property is set to flex.

The Direction property is used to establish the main-axis of a flex container and define the direction that the flex items are placed in the container. There are four possible values for Direction: row, row-reverse, column, and column-reverse.

  • The default value is row, which means that the flex items are arranged left-to-right. row-reverse is the opposite.

  • column and column-reverse work similarly, but they arrange the items in a top-to-bottom direction. column places the items from the top of the container to the bottom, while column-reverse places the items from the bottom to the top.

Justify

The justify-content property only works when the display property is set to flex. It is used to align the flex items along the main axis within a flex container. When only display: flex is set, justify-content becomes applicable. The property takes the following values:

Align

The align-items property only works when the display property is set to flex. It is used to align the flex items along the cross axis within a flex container. The values for align-items are:

Flex wrap

The flex-wrap property is used to control how flex items are wrapped within a flex container.

The flex-wrap property has three possible values: nowrap, wrap, and wrap-reverse.

  • nowrap (default): all flex items will be on one line.

  • wrap: flex items will wrap onto multiple lines, from top to bottom.

  • wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

Grow

flex-grow is used to control the proportion of available space inside a flex container that a flex item should take up. It accepts a unitless value and serves as a means to dictate how much a flex item should grow if necessary. By default, the value is 0, meaning the item will not grow.

If all items within a flex container have a flex-grow value of 1, the remaining space will be distributed equally among all the items. If one item has a value of 2, for example, it will take up twice as much space as the others.

Shrink

The flex-shrink property determines a flex item's shrink rate in comparison to other items in the container when there's insufficient space. It accepts a unitless value, with a default of 1, meaning the higher the value, the more the item shrinks.

Column Gap

This property only works when the display property is set to flex. It sets the size of the gap between the columns in a grid container.

Row Gap

This property only works when the display property is set to flex. It sets the size of the gap between the rows in a grid container.

flex-start (default): items are packed towards the start of the main axis.

flex-end: items are packed towards the end of the main axis.

center: items are centered along the main axis.

space-between: items are evenly distributed along the main axis, with the first item at the start and the last item at the end.

space-around: items are evenly distributed along the main axis with equal space around them.

flex-start: items are aligned at the start of the cross axis.

flex-end: items are aligned at the end of the cross axis.

center: items are centered along the cross axis.

baseline: items are aligned such that their baselines align.

stretch (default): items are stretched to fill the container along the cross axis.