Flexbox - Revision history

Ghenne: /* Change the color of the text */

2019-03-09T22:13:06Z

Change the color of the text

← Older revision		Revision as of 22:13, 9 March 2019
Line 130:		Line 130:

	[[Category:General]]		[[Category:General]]

			[[Category:Common]]

Ghenne at 19:06, 30 November 2018

2018-11-30T19:06:43Z

← Older revision		Revision as of 19:06, 30 November 2018
Line 1:		Line 1:
	~~[[File:FlexBox.png\|frame\|FlexBoxes: A header, a simple DIV, a wrapper and a button.]]~~
	~~[[File:FlexBoxaddchild.png\|frame\|Adding a control to a FlexBox wrapper.]]~~


	== Description ==		== Description ==

Ghenne: /* Description */

2018-11-30T16:35:13Z

Description

← Older revision		Revision as of 16:35, 30 November 2018
Line 28:		Line 28:
	=== alignItems ===		=== alignItems ===
	Specifies the default alignment for items inside the flexible container. display:flex must be set.		Specifies the default alignment for items inside the flexible container. display:flex must be set.

	[[File:AlignItems.png\|frameless\|666px]]		[[File:AlignItems.png\|frameless\|666px]]

	=== flexDirection ===		=== flexDirection ===
	Sets the direction of the flexible items inside the control. display:flex must be set.		Sets the direction of the flexible items inside the control. display:flex must be set.

	[[File:FlexDirection.png\|frameless\|666px]]		[[File:FlexDirection.png\|frameless\|666px]]

	=== flexWrap ===		=== flexWrap ===
	Specifies whether the flexible items should wrap or not. display:flex must be set.		Specifies whether the flexible items should wrap or not. display:flex must be set.

	[[File:FlexWrap.png\|frameless\|666px]]		[[File:FlexWrap.png\|frameless\|666px]]

	=== justifyContent ===		=== justifyContent ===
	Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.		Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.

	[[File:JustifyContent.png\|frameless\|666px]]		[[File:JustifyContent.png\|frameless\|666px]]

Ghenne: /* alignContent */

2018-11-30T16:34:49Z

alignContent

← Older revision		Revision as of 16:34, 30 November 2018
Line 23:		Line 23:
	=== alignContent ===		=== alignContent ===
	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.		Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.

	[[File:AlignContent.png\|frameless\|666px]]		[[File:AlignContent.png\|frameless\|666px]]

Ghenne: /* Description */

2018-11-30T16:34:08Z

Description

← Older revision		Revision as of 16:34, 30 November 2018
Line 23:		Line 23:
	=== alignContent ===		=== alignContent ===
	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.		Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.
	[[File:AlignContent.png\|frameless\|~~600px~~]]		[[File:AlignContent.png\|frameless\|666px]]

	=== alignItems ===		=== alignItems ===
	Specifies the default alignment for items inside the flexible container. display:flex must be set.		Specifies the default alignment for items inside the flexible container. display:flex must be set.
	[[File:AlignItems.png\|frameless\|~~800px~~]]		[[File:AlignItems.png\|frameless\|666px]]

	=== flexDirection ===		=== flexDirection ===
	Sets the direction of the flexible items inside the control. display:flex must be set.		Sets the direction of the flexible items inside the control. display:flex must be set.
	[[File:FlexDirection.png\|frameless\|~~800px~~]]		[[File:FlexDirection.png\|frameless\|666px]]

	=== flexWrap ===		=== flexWrap ===
	Specifies whether the flexible items should wrap or not. display:flex must be set.		Specifies whether the flexible items should wrap or not. display:flex must be set.
	[[File:FlexWrap.png\|frameless\|~~800px~~]]		[[File:FlexWrap.png\|frameless\|666px]]

	=== justifyContent ===		=== justifyContent ===
	Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.		Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.
	[[File:JustifyContent.png\|frameless\|~~800px~~]]		[[File:JustifyContent.png\|frameless\|666px]]

	== Properties ==		== Properties ==

Ghenne: /* alignContent */

2018-11-30T16:33:27Z

alignContent

← Older revision		Revision as of 16:33, 30 November 2018
Line 23:		Line 23:
	=== alignContent ===		=== alignContent ===
	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.		Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.
	[[File:AlignContent.png\|frameless\|~~800px~~]]		[[File:AlignContent.png\|frameless\|600px]]

	=== alignItems ===		=== alignItems ===

Ghenne: /* Description */

2018-11-30T16:32:22Z

Description

← Older revision		Revision as of 16:32, 30 November 2018
Line 23:		Line 23:
	=== alignContent ===		=== alignContent ===
	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.		Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.
			[[File:AlignContent.png\|frameless\|800px]]

	=== alignItems ===		=== alignItems ===
	Specifies the default alignment for items inside the flexible container. display:flex must be set.		Specifies the default alignment for items inside the flexible container. display:flex must be set.
			[[File:AlignItems.png\|frameless\|800px]]

	=== flexDirection ===		=== flexDirection ===
	Sets the direction of the flexible items inside the control. display:flex must be set.		Sets the direction of the flexible items inside the control. display:flex must be set.
			[[File:FlexDirection.png\|frameless\|800px]]

	=== flexWrap ===		=== flexWrap ===
	Specifies whether the flexible items should wrap or not. display:flex must be set.		Specifies whether the flexible items should wrap or not. display:flex must be set.
			[[File:FlexWrap.png\|frameless\|800px]]

	=== justifyContent ===		=== justifyContent ===
	Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.		Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.
			[[File:JustifyContent.png\|frameless\|800px]]

	== Properties ==		== Properties ==

Ghenne: /* Description */

2018-11-30T15:35:47Z

Description

← Older revision		Revision as of 15:35, 30 November 2018
Line 5:		Line 5:
	== Description ==		== Description ==

	The FlexBox control is an HTML wrapper which you can use to create your own control or element. It was introduced in AppStudio 7~~, and replaces and enhances~~ the ~~Generic control~~.		The FlexBox control is an HTML wrapper which you can use to create your own control or element. It was introduced in AppStudio 7. It has special styling features which let you easily position any controls inside the FlexBox.

	It can be used to create customized HTML element by setting the ''HTMLTag'' property to <div> or the name of almost any other HTML element. The ''content'' property is the innerHTML of the element. It can be simple text or a complex HTML structure.		It is based on the [[Container]] control, so it works in much the same way. In fact, the Container can also do FlexBox positioning: it also has the special styling features. (As do [[Header]], [[GridColumn (Bootstrap)\|GridColumn]] and [[GridRow (Bootstrap)\|GridRow]]).

			It can be used to create customized HTML element by setting the ''HTMLTag'' property to <div> or the name of almost any other HTML element. The ''content'' property is the innerHTML of the element. It can be empty, simple text or a complex HTML structure.

	The FlexBox control can also be used as a wrapper for other controls you have set up in your project. Add them to the Design Screen as usual, then right click in a FlexBox and use Add Child. The control will then move into the FlexBox. If you reposition the FlexBox, the included controls ("children") will move with it. Use right click Remove Child to take a child out of a FlexBox.		The FlexBox control can also be used as a wrapper for other controls you have set up in your project. Add them to the Design Screen as usual, then right click in a FlexBox and use Add Child. The control will then move into the FlexBox. If you reposition the FlexBox, the included controls ("children") will move with it. Use right click Remove Child to take a child out of a FlexBox.

Ghenne: /* Description */

2018-11-30T15:28:19Z

Description

← Older revision		Revision as of 15:28, 30 November 2018
Line 18:		Line 18:

	At runtime, controls can be added as children using the addChild() function: <code>FlexBox1.addChild(Button1)</code>.		At runtime, controls can be added as children using the addChild() function: <code>FlexBox1.addChild(Button1)</code>.

			=== alignContent ===
			Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.

			=== alignItems ===
			Specifies the default alignment for items inside the flexible container. display:flex must be set.

			=== flexDirection ===
			Sets the direction of the flexible items inside the control. display:flex must be set.

			=== flexWrap ===
			Specifies whether the flexible items should wrap or not. display:flex must be set.

			=== justifyContent ===
			Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.

	== Properties ==		== Properties ==

Ghenne: /* FlexBox Properties */

2018-11-30T15:24:46Z

FlexBox Properties

← Older revision		Revision as of 15:24, 30 November 2018
Line 43:		Line 43:
	'''inherit:''' Inherits this property from its parent element.,		'''inherit:''' Inherits this property from its parent element.,
	\|-		\|-
	\| flexDirection \|\| ~~sets~~ the direction of the flexible items inside the control. display:flex must be set.<br>		\| flexDirection \|\| Sets the direction of the flexible items inside the control. display:flex must be set.<br>
	'''row:''' Default value. The flexible items are displayed horizontally, as a row:''' <br>		'''row:''' Default value. The flexible items are displayed horizontally, as a row:''' <br>
	'''row-reverse:''' Same as row, but in reverse order:''' <br>		'''row-reverse:''' Same as row, but in reverse order:''' <br>