flexbox_and_grid.md

Flexbox and grid

• Align Content
• Align Items
• Align Self
• Flex
• Flex Basis
• Flex Direction
• Flex Grow
• Flex Shrink
• Flex Wrap
• Gap
• Grid Auto Columns
• Grid Auto Flow
• Grid Auto Rows
• Grid Column Start / End
• Grid Row Start / End
• Grid Template Columns
• Grid Template Rows
• Justify Content
• Justify Items
• Justify Self
• Order
• Place Content
• Place Items
• Place Self

---

Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

Group

TailwindJS token
align_content_utilities

Utilities

TailwindJS token	TailwindCSS token
content_around	content-around
content_baseline	content-baseline
content_between	content-between
content_center	content-center
content_end	content-end
content_evenly	content-evenly
content_normal	content-normal
content_start	content-start
content_stretch	content-stretch

Align Items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

Group

TailwindJS token
align_items_utilities

Utilities

TailwindJS token	TailwindCSS token
items_baseline	items-baseline
items_center	items-center
items_end	items-end
items_start	items-start
items_stretch	items-stretch

Align Self

Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.

Group

TailwindJS token
align_self_utilities

Utilities

TailwindJS token	TailwindCSS token
self_auto	self-auto
self_baseline	self-baseline
self_center	self-center
self_end	self-end
self_start	self-start
self_stretch	self-stretch

Flex

Utilities for controlling how flex items both grow and shrink.

Group

TailwindJS token
flex_utilities

Utilities

TailwindJS token	TailwindCSS token
flex_1	flex-1
flex_auto	flex-auto
flex_initial	flex-initial
flex_none	flex-none

Arbitraries

TailwindJS token	TailwindCSS token
flex_arbitrary, flex_arb	flex-[…]

Flex Basis

Utilities for controlling the initial size of flex items.

Group

TailwindJS token
flex_basis_utilities

Utilities

TailwindJS token	TailwindCSS token
basis_0	basis-0
basis_0_5	basis-0.5
basis_1	basis-1
basis_10	basis-10
basis_10_on_12	basis-10/12
basis_11	basis-11
basis_11_on_12	basis-11/12
basis_12	basis-12
basis_14	basis-14
basis_16	basis-16
basis_1_5	basis-1.5
basis_1_on_12	basis-1/12
basis_1_on_2	basis-1/2
basis_1_on_3	basis-1/3
basis_1_on_4	basis-1/4
basis_1_on_5	basis-1/5
basis_1_on_6	basis-1/6
basis_2	basis-2
basis_20	basis-20
basis_24	basis-24
basis_28	basis-28
basis_2_5	basis-2.5
basis_2_on_12	basis-2/12
basis_2_on_3	basis-2/3
basis_2_on_4	basis-2/4
basis_2_on_5	basis-2/5
basis_2_on_6	basis-2/6
basis_3	basis-3
basis_32	basis-32
basis_36	basis-36
basis_3_5	basis-3.5
basis_3_on_12	basis-3/12
basis_3_on_4	basis-3/4
basis_3_on_5	basis-3/5
basis_3_on_6	basis-3/6
basis_4	basis-4
basis_40	basis-40
basis_44	basis-44
basis_48	basis-48
basis_4_on_12	basis-4/12
basis_4_on_5	basis-4/5
basis_4_on_6	basis-4/6
basis_5	basis-5
basis_52	basis-52
basis_56	basis-56
basis_5_on_12	basis-5/12
basis_5_on_6	basis-5/6
basis_6	basis-6
basis_60	basis-60
basis_64	basis-64
basis_6_on_12	basis-6/12
basis_7	basis-7
basis_72	basis-72
basis_7_on_12	basis-7/12
basis_8	basis-8
basis_80	basis-80
basis_8_on_12	basis-8/12
basis_9	basis-9
basis_96	basis-96
basis_9_on_12	basis-9/12
basis_auto	basis-auto
basis_full	basis-full
basis_px	basis-px

Arbitraries

TailwindJS token	TailwindCSS token
basis_arbitrary, basis_arb	basis-[…]

Flex Direction

Utilities for controlling the direction of flex items.

Group

TailwindJS token
flex_direction_utilities

Utilities

TailwindJS token	TailwindCSS token
flex_col	flex-col
flex_col_reverse	flex-col-reverse
flex_row	flex-row
flex_row_reverse	flex-row-reverse

Flex Grow

Utilities for controlling how flex items grow.

Group

TailwindJS token
flex_grow_utilities

Utilities

TailwindJS token	TailwindCSS token
grow	grow
grow_0	grow-0

Arbitraries

TailwindJS token	TailwindCSS token
grow_arbitrary, grow_arb	grow-[…]

Flex Shrink

Utilities for controlling how flex items shrink.

Group

TailwindJS token
flex_shrink_utilities

Utilities

TailwindJS token	TailwindCSS token
shrink	shrink
shrink_0	shrink-0

Arbitraries

TailwindJS token	TailwindCSS token
shrink_arbitrary, shrink_arb	shrink-[…]

Flex Wrap

Utilities for controlling how flex items wrap.

Group

TailwindJS token
flex_wrap_utilities

Utilities

TailwindJS token	TailwindCSS token
flex_nowrap	flex-nowrap
flex_wrap	flex-wrap
flex_wrap_reverse	flex-wrap-reverse

Gap

Utilities for controlling gutters between grid and flexbox items.

Group

TailwindJS token
gap_utilities

Utilities

TailwindJS token	TailwindCSS token
gap_0	gap-0
gap_0_5	gap-0.5
gap_1	gap-1
gap_10	gap-10
gap_11	gap-11
gap_12	gap-12
gap_14	gap-14
gap_16	gap-16
gap_1_5	gap-1.5
gap_2	gap-2
gap_20	gap-20
gap_24	gap-24
gap_28	gap-28
gap_2_5	gap-2.5
gap_3	gap-3
gap_32	gap-32
gap_36	gap-36
gap_3_5	gap-3.5
gap_4	gap-4
gap_40	gap-40
gap_44	gap-44
gap_48	gap-48
gap_5	gap-5
gap_52	gap-52
gap_56	gap-56
gap_6	gap-6
gap_60	gap-60
gap_64	gap-64
gap_7	gap-7
gap_72	gap-72
gap_8	gap-8
gap_80	gap-80
gap_9	gap-9
gap_96	gap-96
gap_px	gap-px
gap_x_0	gap-x-0
gap_x_0_5	gap-x-0.5
gap_x_1	gap-x-1
gap_x_10	gap-x-10
gap_x_11	gap-x-11
gap_x_12	gap-x-12
gap_x_14	gap-x-14
gap_x_16	gap-x-16
gap_x_1_5	gap-x-1.5
gap_x_2	gap-x-2
gap_x_20	gap-x-20
gap_x_24	gap-x-24
gap_x_28	gap-x-28
gap_x_2_5	gap-x-2.5
gap_x_3	gap-x-3
gap_x_32	gap-x-32
gap_x_36	gap-x-36
gap_x_3_5	gap-x-3.5
gap_x_4	gap-x-4
gap_x_40	gap-x-40
gap_x_44	gap-x-44
gap_x_48	gap-x-48
gap_x_5	gap-x-5
gap_x_52	gap-x-52
gap_x_56	gap-x-56
gap_x_6	gap-x-6
gap_x_60	gap-x-60
gap_x_64	gap-x-64
gap_x_7	gap-x-7
gap_x_72	gap-x-72
gap_x_8	gap-x-8
gap_x_80	gap-x-80
gap_x_9	gap-x-9
gap_x_96	gap-x-96
gap_x_px	gap-x-px
gap_y_0	gap-y-0
gap_y_0_5	gap-y-0.5
gap_y_1	gap-y-1
gap_y_10	gap-y-10
gap_y_11	gap-y-11
gap_y_12	gap-y-12
gap_y_14	gap-y-14
gap_y_16	gap-y-16
gap_y_1_5	gap-y-1.5
gap_y_2	gap-y-2
gap_y_20	gap-y-20
gap_y_24	gap-y-24
gap_y_28	gap-y-28
gap_y_2_5	gap-y-2.5
gap_y_3	gap-y-3
gap_y_32	gap-y-32
gap_y_36	gap-y-36
gap_y_3_5	gap-y-3.5
gap_y_4	gap-y-4
gap_y_40	gap-y-40
gap_y_44	gap-y-44
gap_y_48	gap-y-48
gap_y_5	gap-y-5
gap_y_52	gap-y-52
gap_y_56	gap-y-56
gap_y_6	gap-y-6
gap_y_60	gap-y-60
gap_y_64	gap-y-64
gap_y_7	gap-y-7
gap_y_72	gap-y-72
gap_y_8	gap-y-8
gap_y_80	gap-y-80
gap_y_9	gap-y-9
gap_y_96	gap-y-96
gap_y_px	gap-y-px

Arbitraries

TailwindJS token	TailwindCSS token
gap_arbitrary, gap_arb	gap-[…]
gap_x_arbitrary, gap_x_arb	gap-x-[…]
gap_y_arbitrary, gap_y_arb	gap-y-[…]

Grid Auto Columns

Utilities for controlling the size of implicitly-created grid columns.

Group

TailwindJS token
grid_auto_columns_utilities

Utilities

TailwindJS token	TailwindCSS token
auto_cols_auto	auto-cols-auto
auto_cols_fr	auto-cols-fr
auto_cols_max	auto-cols-max
auto_cols_min	auto-cols-min

Arbitraries

TailwindJS token	TailwindCSS token
auto_cols_arbitrary, auto_cols_arb	auto-cols-[…]

Grid Auto Flow

Utilities for controlling how elements in a grid are auto-placed.

Group

TailwindJS token
grid_auto_flow_utilities

Utilities

TailwindJS token	TailwindCSS token
grid_flow_col	grid-flow-col
grid_flow_col_dense	grid-flow-col-dense
grid_flow_dense	grid-flow-dense
grid_flow_row	grid-flow-row
grid_flow_row_dense	grid-flow-row-dense

Grid Auto Rows

Utilities for controlling the size of implicitly-created grid rows.

Group

TailwindJS token
grid_auto_rows_utilities

Utilities

TailwindJS token	TailwindCSS token
auto_rows_auto	auto-rows-auto
auto_rows_fr	auto-rows-fr
auto_rows_max	auto-rows-max
auto_rows_min	auto-rows-min

Arbitraries

TailwindJS token	TailwindCSS token
auto_rows_arbitrary, auto_rows_arb	auto-rows-[…]

Grid Column Start / End

Utilities for controlling how elements are sized and placed across grid columns.

Group

TailwindJS token
grid_column_start_end_utilities

Utilities

TailwindJS token	TailwindCSS token
col_auto	col-auto
col_end_1	col-end-1
col_end_10	col-end-10
col_end_11	col-end-11
col_end_12	col-end-12
col_end_13	col-end-13
col_end_2	col-end-2
col_end_3	col-end-3
col_end_4	col-end-4
col_end_5	col-end-5
col_end_6	col-end-6
col_end_7	col-end-7
col_end_8	col-end-8
col_end_9	col-end-9
col_end_auto	col-end-auto
col_span_1	col-span-1
col_span_10	col-span-10
col_span_11	col-span-11
col_span_12	col-span-12
col_span_2	col-span-2
col_span_3	col-span-3
col_span_4	col-span-4
col_span_5	col-span-5
col_span_6	col-span-6
col_span_7	col-span-7
col_span_8	col-span-8
col_span_9	col-span-9
col_span_full	col-span-full
col_start_1	col-start-1
col_start_10	col-start-10
col_start_11	col-start-11
col_start_12	col-start-12
col_start_13	col-start-13
col_start_2	col-start-2
col_start_3	col-start-3
col_start_4	col-start-4
col_start_5	col-start-5
col_start_6	col-start-6
col_start_7	col-start-7
col_start_8	col-start-8
col_start_9	col-start-9
col_start_auto	col-start-auto

Arbitraries

TailwindJS token	TailwindCSS token
col_arbitrary, col_arb	col-[…]
col_end_arbitrary, col_end_arb	col-end-[…]
col_span_arbitrary, col_span_arb	col-span-[…]
col_start_arbitrary, col_start_arb	col-start-[…]

Grid Row Start / End

Utilities for controlling how elements are sized and placed across grid rows.

Group

TailwindJS token
grid_row_start_end_utilities

Utilities

TailwindJS token	TailwindCSS token
row_auto	row-auto
row_end_1	row-end-1
row_end_10	row-end-10
row_end_11	row-end-11
row_end_12	row-end-12
row_end_13	row-end-13
row_end_2	row-end-2
row_end_3	row-end-3
row_end_4	row-end-4
row_end_5	row-end-5
row_end_6	row-end-6
row_end_7	row-end-7
row_end_8	row-end-8
row_end_9	row-end-9
row_end_auto	row-end-auto
row_span_1	row-span-1
row_span_10	row-span-10
row_span_11	row-span-11
row_span_12	row-span-12
row_span_2	row-span-2
row_span_3	row-span-3
row_span_4	row-span-4
row_span_5	row-span-5
row_span_6	row-span-6
row_span_7	row-span-7
row_span_8	row-span-8
row_span_9	row-span-9
row_span_full	row-span-full
row_start_1	row-start-1
row_start_10	row-start-10
row_start_11	row-start-11
row_start_12	row-start-12
row_start_13	row-start-13
row_start_2	row-start-2
row_start_3	row-start-3
row_start_4	row-start-4
row_start_5	row-start-5
row_start_6	row-start-6
row_start_7	row-start-7
row_start_8	row-start-8
row_start_9	row-start-9
row_start_auto	row-start-auto

Arbitraries

TailwindJS token	TailwindCSS token
row_arbitrary, row_arb	row-[…]
row_end_arbitrary, row_end_arb	row-end-[…]
row_span_arbitrary, row_span_arb	row-span-[…]
row_start_arbitrary, row_start_arb	row-start-[…]

Grid Template Columns

Utilities for specifying the columns in a grid layout.

Group

TailwindJS token
grid_template_columns_utilities

Utilities

TailwindJS token	TailwindCSS token
grid_cols_1	grid-cols-1
grid_cols_10	grid-cols-10
grid_cols_11	grid-cols-11
grid_cols_12	grid-cols-12
grid_cols_2	grid-cols-2
grid_cols_3	grid-cols-3
grid_cols_4	grid-cols-4
grid_cols_5	grid-cols-5
grid_cols_6	grid-cols-6
grid_cols_7	grid-cols-7
grid_cols_8	grid-cols-8
grid_cols_9	grid-cols-9
grid_cols_none	grid-cols-none
grid_cols_subgrid	grid-cols-subgrid

Arbitraries

TailwindJS token	TailwindCSS token
grid_cols_arbitrary, grid_cols_arb	grid-cols-[…]

Grid Template Rows

Utilities for specifying the rows in a grid layout.

Group

TailwindJS token
grid_template_rows_utilities

Utilities

TailwindJS token	TailwindCSS token
grid_rows_1	grid-rows-1
grid_rows_10	grid-rows-10
grid_rows_11	grid-rows-11
grid_rows_12	grid-rows-12
grid_rows_2	grid-rows-2
grid_rows_3	grid-rows-3
grid_rows_4	grid-rows-4
grid_rows_5	grid-rows-5
grid_rows_6	grid-rows-6
grid_rows_7	grid-rows-7
grid_rows_8	grid-rows-8
grid_rows_9	grid-rows-9
grid_rows_none	grid-rows-none
grid_rows_subgrid	grid-rows-subgrid

Arbitraries

TailwindJS token	TailwindCSS token
grid_rows_arbitrary, grid_rows_arb	grid-rows-[…]

Justify Content

Utilities for controlling how flex and grid items are positioned along a container's main axis.

Group

TailwindJS token
justify_content_utilities

Utilities

TailwindJS token	TailwindCSS token
justify_around	justify-around
justify_between	justify-between
justify_center	justify-center
justify_end	justify-end
justify_evenly	justify-evenly
justify_normal	justify-normal
justify_start	justify-start
justify_stretch	justify-stretch

Justify Items

Utilities for controlling how grid items are aligned along their inline axis.

Group

TailwindJS token
justify_items_utilities

Utilities

TailwindJS token	TailwindCSS token
justify_items_center	justify-items-center
justify_items_end	justify-items-end
justify_items_start	justify-items-start
justify_items_stretch	justify-items-stretch

Justify Self

Utilities for controlling how an individual grid item is aligned along its inline axis.

Group

TailwindJS token
justify_self_utilities

Utilities

TailwindJS token	TailwindCSS token
justify_self_auto	justify-self-auto
justify_self_center	justify-self-center
justify_self_end	justify-self-end
justify_self_start	justify-self-start
justify_self_stretch	justify-self-stretch

Order

Utilities for controlling the order of flex and grid items.

Group

TailwindJS token
order_utilities

Utilities

TailwindJS token	TailwindCSS token
order_1	order-1
order_10	order-10
order_11	order-11
order_12	order-12
order_2	order-2
order_3	order-3
order_4	order-4
order_5	order-5
order_6	order-6
order_7	order-7
order_8	order-8
order_9	order-9
order_first	order-first
order_last	order-last
order_none	order-none

Arbitraries

TailwindJS token	TailwindCSS token
order_arbitrary, order_arb	order-[…]

Place Content

Utilities for controlling how content is justified and aligned at the same time.

Group

TailwindJS token
place_content_utilities

Utilities

TailwindJS token	TailwindCSS token
place_content_around	place-content-around
place_content_baseline	place-content-baseline
place_content_between	place-content-between
place_content_center	place-content-center
place_content_end	place-content-end
place_content_evenly	place-content-evenly
place_content_start	place-content-start
place_content_stretch	place-content-stretch

Place Items

Utilities for controlling how items are justified and aligned at the same time.

Group

TailwindJS token
place_items_utilities

Utilities

TailwindJS token	TailwindCSS token
place_items_baseline	place-items-baseline
place_items_center	place-items-center
place_items_end	place-items-end
place_items_start	place-items-start
place_items_stretch	place-items-stretch

Place Self

Utilities for controlling how an individual item is justified and aligned at the same time.

Group

TailwindJS token
place_self_utilities

Utilities

TailwindJS token	TailwindCSS token
place_self_auto	place-self-auto
place_self_center	place-self-center
place_self_end	place-self-end
place_self_start	place-self-start
place_self_stretch	place-self-stretch