An elastic box consists of an elastic container (Flex Container) and elastic child elements (Flex Item). In general, the layout of CSS boxes is a streaming layout based on blocks and inline text, while the elastic layout is an axis layout based on elastic boxes. Figure 1 is a diagram of an axis in the Flexbox specification:

1. Define flex container -display

Define an elastic container by defining the display attribute of the element:

.container{
    display: flex | inline-flex;
}
Copy the code

The Flex container contains one or more Flex items (child elements), which by default are displayed on a single line in the Flex container.

         .container{
		display: flex;
		flex-direction: row;
		height: 100px;
		width: 500px;
		margin-left: 50px;
		margin-top: 50px;
		background: #f1f1f1;
	}
	.left, .right{
		width: 100px;
		height: 100px;
		background: #ccc;
	}
	.main{
		width: 300px;
	}
	.test{
		display: inline-block;
		height: 100px;
		background: red;
		margin-left: 50px;
	}
	
	<div class="container">
	    <div class="left">left</div>
		<div class="main">main</div>
		<div class="right">right</div>
	</div>
	<span class="test">test</span>
Copy the code

.container{ display: inline-flex; . . }Copy the code

Note:

• Outside the elastic container and inside the elastic child elements are normally rendered. The elastic box only defines how the elastic child elements are laid out inside the elastic container.
• Flex container (display: flex;) Unlike block-level elements, some of the features that apply to block-level elements do not apply to Flex containers, for example: all column-*, float, clear, and vertical-align properties in a multi-column group do not apply to Flex containers.

2, flex – direction

Specify the elastic box main | cross – start from which position (up and down or so), which specifies the flex project arrangement direction.

flex-direction: row | row-reverse | column | column-reverse
Copy the code

• Row: default value, from left to right;
• Row-reverse: Reverse row, from right to left;
• Column: from top to bottom;
• Column-reverse: Reverses column from bottom to top.

Additional attribute -direction

Specifies the writing direction of the text.

direction: ltr | rtl
Copy the code

• LTR: The default, left to right, indicates the direction of writing from left to right;
• RTL: right to left: indicates the writing direction from right to left.

Note: The effect of flex-direction is affected by the direction attribute. If the ancestor element of the Flex container has the direction attribute set, the Flex container first obeys the direction effect and then applies the effect of the Flex-direction attribute.

body{ direction: rtl; } .container{ display: flex; flex-direction: row; . } <div class="container"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div>Copy the code

.container{ display: flex; flex-direction: row-reverse; . }Copy the code

The resources

CSS3 Flex Box (Flex Box)