University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Display: flex

Display: flex

The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

The display: flex property enables the flexbox layout mode, allowing you to manipulate elements’ alignment, spacing, and order within a container. It’s a helpful tool for creating complex designs and layouts that adapt well to different screen sizes. 

Flex items try to fit on a single line by default, but you can wrap items into multiple rows with display: flex combined with the flex-wrap property.

Visit Webflow University to learn more about using flexbox and other display settings to create customized, responsive layouts for your webpages.

Relevant courses

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Localization

→
Localization (l10n) involves adapting digital content and applications to meet a specific region or culture’s language and conventions.

Cookie

→
Cookies are small text files sent by a website to a user’s web browser that enhance their browsing experience by remembering site preferences and activities.

Product attribute

→
Product attributes are specific characteristics that define purchasable merchandise or commodities and provide relevant information to customers.

Preview mode

→
A feature that allows you to see how your site would be displayed in a browser without needing to publish your site or leave the Designer.

Form submission

→
When someone sends data through one of your site's forms.

Array

→
An array is an ordered, random-access collection of data. This data can be either primitive or object, depending on the coding language.

Flex-basis

→
Flex-basis is a CSS property used in flexboxes that sets the initial size of a flex item before it grows or shrinks.

Hit

→
A hit is a request to a web server from a browser for a specific resource.

Content-first design

→
A design approach that prioritizes content planning and production in the design process.

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Return on investment (ROI)

→
Return on investment (ROI) is a metric evaluating the profitability or gain of a venture.

Total Form Submissions

→
The amount of times a site visitor submits data using your site's form(s).

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to help you keep track of the element you're interacting with in relation to its hierarchy.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Serialization

→
Serialization is the process of converting data into an optimized format for storage, transmission, and sharing.

Strong text

→
The <strong> element defines important text with added semantic importance.

Span text

→
The span tag is used to style inline-text.

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

Common targets

→
All elements on the page targeted by the same selector.

Top of the funnel

→
Top of the funnel (TOFU) refers to the initial marketing funnel stage where potential customers become aware of a brand’s existence.

Left To Right (LTR)

→
Left To Right (LTR) describes a text layout that starts from the left and proceeds to the right.

Footer

→
A footer is a section at the bottom of a web page.

Last published

→
The last time your site was published.

Flex-shrink

→
The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Forms section

→
A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

Empty elements

→
Empty or void elements are HTML elements that don’t require a closing tag because they contain no content.

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

List

→
An element that contains ordered (numbered) or unordered (bulleted) lists.

Drafted pages

→
You can exclude pages from being published to your site by setting them as drafts. These can be unfinished pages, internal pages such as style guides, archived pages saved for backup, etc. Learn more about drafted pages.

ALPN

→
ALPN stands for Application-Layer Protocol Negotiation. It’s a Transport Layer Security (TLS) extension that aids client and server identification during secure data transfers.

Parameter

→
A parameter is a programming variable or value that transfers data between functions.

Display property

→
Display properties operate like instructions that tell a browser how to display the different parts of a webpage. You can customize an element’s appearance and layout by changing its display property.

Video

→
A Webflow element that displays externally hosted videos such as YouTube and Vimeo.

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

API

→
APIs, or Application Programming Interfaces, are common code protocols that let apps safely exchange data with other apps, software, and hardware.

Em

→
An em in CSS is a scalable and relative unit of measurement that defines the size of an element relative to its parent's font size.

Webflow Support

→
The place to go when you need help using Webflow.

Application context

→
An application context is a set of data that identifies an application’s tasks, where those tasks originate, and how those tasks are configured.

Modal window

→
A modal window (or modal) is a web element that displays above all content and restricts user interaction until it’s manually dismissed.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Heading

→
A heading is a text element that provides a title or headline for a section of content on a webpage. These elements guide users and search engines through your content.

Wrapper

→
A wrapper is a programming language function for encapsulating and organizing elements within a well-defined interface.

CMS Collection page

→
A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

Network Address Translation (NAT)

→
NAT (Network Address Translation) is a technique that enables communication between devices with private internet protocol addresses and the public internet.

Decryption

→
Decryption is the process of reverting encrypted data to its original format.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Tutorials

→
The fastest way to learn how to use Webflow.

Semantics

→
Semantics accurately represent the structure and purpose of content in computer languages, enabling web developers and programmers to ensure the written code produces an output legible to humans and machines.

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Section

→
A section is an element of design layout that divides a web page into visually distinct segments.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

Locked site

→
When you have more unhosted sites in your Dashboard than your Workspace plan allows, those additional sites past your limit will be “locked” until you upgrade your plan. When you upgrade, you’ll be allowed more unhosted sites (up to the limit for your Workspace plan) and will be able to access your previously locked sites.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Cipher

→
In cryptography, a cipher is a digital security algorithm that encrypts and decrypts data.

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

Effects

→
A section in the Style panel that houses CSS properties for changing how an element appears, such as its opacity, outline, and box shadows.

Call-to-action (CTA)

→
A call-to-action (CTA) is a website feature that prompts visitors to perform a specific action.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Folder settings

→
Allows you to manage your folders.

Java

→
Java is an object-oriented programming language for building dynamic, interactive web applications across platforms

ATAG

→
Authoring Tool Accessibility Guidelines (ATAG) are a layered rule-set that influence how designers and developers create a more accessible internet.

Front-end

→
The front-end refers to the visual and interactive part of a website or application that users directly interact with.

Google Universal Analytics Tracking ID

→
A unique ID you can use to link your Google Analytics account to your Webflow site.

Form button

→
A form element that lets website visitors submit data to your form handler.

Callback function

→
A callback function is passed as an argument to another function and executed upon completing the latter’s task.

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Buffer

→
A buffer is a temporary storage area that holds data while transferring it between different components or systems.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

Maximum height (max height)

→
The “max-height” CSS property defines an element’s maximum height.

Blog

→
A blog, short for weblog, is a website or webpage where an individual or group regularly shares content about specific topics, typically in reverse chronological order.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Reference field

→
A CMS field used in Collections. This powerful field allows you to link to other Collections within your website to populate fields in Collection lists and Collection pages.

Synchronous

→
Synchronous programming refers to sequentially executed operations.

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Right padding

→
The inside spacing between the right border of an element and the elements inside it.

Favicon

→
A 16x16 px image that displays in browser tabs, bookmarks, and other browser areas. It's typically a simplified version of the site's logo.

Percent

→
A measurement unit relative to an element's parent.

Ancestor

→
Any element that is further up the element hierarchy of the document tree. For example, the Body element is the ancestor of all elements on the Designer canvas.

Unbranded form submission notification

→
Form submission notifications that have no reference to Webflow (e.g., notifications sent from “no-reply@webforms.io” instead of “no-reply@webflow.com”).

Site plan

→
A Webflow plan that you can add/apply to individual sites. You’ll receive access to different site and hosting features based on your Site plan.

Valid

→
A valid CSS pseudo-class is a keyword that enables styling HTML elements based on their state or position in the document structure or web page.

Text area

→
A form element that allows site visitors to enter multi-line data.

Form block

→
Form blocks allow you to add form elements to a website, including appointment booking, surveys, applications, polls, and contact forms.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Flex-sizing

→
A flexbox property that determines the resizing behavior of flex children across viewport sizes. They can shrink, grow, or remain static.

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

Accessibility tree

→
A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.

Last updated

→
The last time someone made a change to your site.

Required field

→
You can set any Collection field as "Required," which means that a value must be added to that field in the Collection item before it can be published. The only Collection field that cannot be made required is the Switch field.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

Bottom bar

→
A bottom bar is a navigation bar at the bottom of an app or webpage.

JPEG

→
Short for Joint Photographic Experts Group, JPEG is a file format that uses lossy compression to maintain manageable file sizes without compromising image quality.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more