FlexboxGeneralinfo - Revision history

Bacchas at 23:26, 9 February 2017

2017-02-09T23:26:49Z

← Older revision		Revision as of 23:26, 9 February 2017
Line 16:		Line 16:

	==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==		==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==
			==[http://smarchal.com/sass-flexbox/ Flex Mixin for SCSS]==
	<pre>		<pre>
	<section class="flex-container">		<section class="flex-container">

2017-02-09T23:08:03Z

← Older revision		Revision as of 23:08, 9 February 2017
Line 13:		Line 13:
	** this is used to align an individual item.		** this is used to align an individual item.
	*** example 3 divs with class of mydiv, center div with additional class of mydivA. if align-self: stretch is on mydivA it will affect only that div.		*** example 3 divs with class of mydiv, center div with additional class of mydivA. if align-self: stretch is on mydivA it will affect only that div.
			* align-content: will align all content

	==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==		==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==

2017-02-09T22:46:55Z

← Older revision		Revision as of 22:46, 9 February 2017
Line 10:		Line 10:
	** second value is flex shrink		** second value is flex shrink
	** third value is flex basis (starting size)		** third value is flex basis (starting size)
			* align-self
			** this is used to align an individual item.
			*** example 3 divs with class of mydiv, center div with additional class of mydivA. if align-self: stretch is on mydivA it will affect only that div.

	==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==		==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==

2017-02-09T22:02:43Z

← Older revision		Revision as of 22:02, 9 February 2017
Line 11:		Line 11:
	** third value is flex basis (starting size)		** third value is flex basis (starting size)

	[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]		==[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]==
	<pre>		<pre>
	<section class="flex-container">		<section class="flex-container">

2017-02-09T22:01:46Z

← Older revision		Revision as of 22:01, 9 February 2017
Line 10:		Line 10:
	** second value is flex shrink		** second value is flex shrink
	** third value is flex basis (starting size)		** third value is flex basis (starting size)

			[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Complete guide to flexbox]
	<pre>		<pre>
	<section class="flex-container">		<section class="flex-container">

2017-02-09T21:51:17Z

← Older revision		Revision as of 21:51, 9 February 2017
Line 9:		Line 9:
	** first value is flex grow		** first value is flex grow
	** second value is flex shrink		** second value is flex shrink
	** third value is flex basis		** third value is flex basis (starting size)
	<pre>		<pre>
	<section class="flex-container">		<section class="flex-container">

2017-02-09T20:44:08Z

← Older revision		Revision as of 20:44, 9 February 2017
Line 6:		Line 6:
	* display: flex is done on the container, this allows all child items to be controlled with flex		* display: flex is done on the container, this allows all child items to be controlled with flex
	* flex-flow: row wrap; // this aligns content in a row. contents that are overflowing will wrap to the next row		* flex-flow: row wrap; // this aligns content in a row. contents that are overflowing will wrap to the next row
			* flex: 1 1 100px;
			** first value is flex grow
			** second value is flex shrink
			** third value is flex basis
	<pre>		<pre>
	<section class="flex-container">		<section class="flex-container">

2017-02-09T20:26:50Z

← Older revision		Revision as of 20:26, 9 February 2017
Line 4:		Line 4:
	# Flexbox properties can the control orientation, alignment, size and spacing of child flex items		# Flexbox properties can the control orientation, alignment, size and spacing of child flex items
	# container are set to either row or column orientation		# container are set to either row or column orientation
			* display: flex is done on the container, this allows all child items to be controlled with flex
			* flex-flow: row wrap; // this aligns content in a row. contents that are overflowing will wrap to the next row
	<pre>		<pre>
	<section class="flex-container">		<section class="flex-container">
Line 26:		Line 28:
	border: 1px solid #333;		border: 1px solid #333;
	display: flex;		display: flex;
	flex-~~direction~~: row;		flex-flow: row wrap;
	}		}
	</pre>		</pre>

2017-02-09T20:15:04Z

← Older revision		Revision as of 20:15, 9 February 2017
Line 4:		Line 4:
	# Flexbox properties can the control orientation, alignment, size and spacing of child flex items		# Flexbox properties can the control orientation, alignment, size and spacing of child flex items
	# container are set to either row or column orientation		# container are set to either row or column orientation
			<pre>
			<section class="flex-container">
			<div class="box">
			<h3>one</h3>
			</div>
			<div class="box">
			<h3>two</h3>
			</div>
			<div class="box">
			<h3>three</h3>
			</div>
			<div class="box">
			<h3>four</h3>
			</div>
			</section>
			</pre>
			''' CSS '''
			<pre>
			.flex-container{
			margin: 1em 0;
			border: 1px solid #333;
			display: flex;
			flex-direction: row;
			}
			</pre>

2017-02-09T20:08:36Z

← Older revision		Revision as of 20:08, 9 February 2017
Line 1:		Line 1:
			==Using Flexbox ==
	# define a parent element as a flex container		# define a parent element as a flex container
	# All child elements become flex Items		# All child elements become flex Items
	# Flexbox properties can the control orientation, alignment, size and spacing of child flex items		# Flexbox properties can the control orientation, alignment, size and spacing of child flex items
			# container are set to either row or column orientation