1. Basic concepts , Borrow a picture from Mr. Ruan Yifeng :

The container has two axes by default : Horizontal spindle (main axis) And the vertical cross axis (cross axis). Starting position of spindle ( The intersection with the border ) be called main start, The ending position is called main end; The starting position of the cross axis is called cross start, The ending position is called cross end.

Items are arranged along the main axis by default . The spindle space occupied by a single project is called main size, The cross axis space occupied is called cross size.

2. Basic properties of container

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2.1 flex-direction  Property determines the direction of the spindle ( And row arrangement )

 .box{
flex-direction:row | row-reverse | column |column-reverse /* There are four values Separate display effects */
}
The default value is :row

html5 Implementation code :
<div class="box">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
</div>
css3 Partial implementation code :
body{
margin: 0 auto;
width: 1000px;
}
.box{
background: gold;
margin: 1px;
display: flex; /* You have to set this */
flex-direction: row; /* In a row */
}
.box-item{
width: 100px;
height: 100px;
line-height: 100px;
background: #ccc;
color: white;
text-align: center;
margin: 5px;
}

Realization effect :

 If css3 Change to flex-direction: row-reverse;

The other two attributes are analogous ;

2.2 flex-wrap  Define if an axis cannot line up , How to wrap

 .box{
flex-wrap:nowrap | wrap | wrap-reverse;
}
Default :nowrap
html Part of the code :
<div class="box1">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
</div>
css Part of the code :
.box1{
background: gold;
margin: 1px;
display: flex;
flex-flow: wrap;
}
.box-item{
width: 100px;
height: 100px;
line-height: 100px;
background: #ccc;
color: white;
text-align: center;
margin: 5px;
}

effect :

This is the effect of line breaks , Other effects can be tried ;

2.3 flex-flow yes flex-direction and  flex-wrap Abbreviation ; So when you write on it alone, you have to write two

The default value is row norap

 .box{
flex-flow: flex-direction || flex-wrap
}

2.4 justify-content Property defines the alignment of the item on the spindle

 .box{
justify-content:flex-start | flex-end | center | space-between | space-around;
}
 flex-start( The default value is ): Align left 
flex-end: Right alignment
center: In the middle
space-between: full-justified , The intervals between the items are all equal .
space-around: The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .

Try an effect :

html5 Code :
<div class="box2">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
</div>
css3 Code : 
.box2{
background: gold;
margin: 1px;
display: flex;
justify-content: center; /** You can swap other attribute values */
}
.box-item{
width: 100px;
height: 100px;
line-height: 100px;
background: #ccc;
color: white;
text-align: center;
margin: 5px;
}

design sketch :

Others can try on their own :

 flex-start( The default value is ): Align left 
flex-end: Right alignment
center: In the middle
space-between: full-justified , The intervals between the items are all equal .
space-around: The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .

2.5 align-items Define how items align on the cross axis ( The vertical axis )

 .box{
align-items:flex-start | flex-end |center | baseline |stretch
}
html5 Code :
<div class="box3">
<div class="box-item">1</div>
<div class="box-item item-tall">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item item-tall">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item item-tall">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
</div>
css3 Code :
.box3{
background: gold;
margin: 1px;
display: flex;
align-items:flex-end; /* You can change it to other values */
flex-wrap: wrap;
}
.box-item{
width: 100px;
height: 100px;
line-height: 100px;
background: #ccc;
color: white;
text-align: center;
margin: 5px;
}
.item-tall{
height: 200px; /* Cross shaft , Different heights */
line-height: 200px;
}

effect :

Others can try on their own :

 flex-start: Align the starting points of the intersecting axes .
flex-end: The ends of the intersecting axes are aligned .
center: Align the midpoint of the intersecting axis .
baseline: Baseline alignment of the first line of text for the project .
stretch( The default value is ): If the project is not set to height or set to auto, Will fill the entire container .

2.6 align-content  Property defines multiple axes ( Multiple lines ) The alignment of , If the project has only one axis , This attribute doesn't work

 .box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
html Code :
<div class="box3 box3-tall">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
</div>
css Code :
.box3{
background: gold;
margin: 1px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.box-tall {
height: 300px;
}
.box-item{
width: 100px;
height: 100px;
line-height: 100px;
background: #ccc;
color: white;
text-align: center;
margin: 5px;
}

effect :

Others can try on their own :

 flex-start: Align with the starting point of the intersecting axis .
flex-end: Align with the end of the cross axis .
center: Align with the midpoint of the intersecting axis .
space-between: Align with both ends of the cross axis , The average distribution of spacing between axes .
space-around: The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .
stretch( The default value is ): The axis occupies the entire cross axis .

3. The properties of the child elements in the container

order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default is 0.
flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in .
flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink .
flex-basis Property defines before allocating extra space , Spindle space occupied by the project (main size). Browser according to this property , Calculate if the spindle has extra space . Its default value is auto, The original size of the project .
align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch

Usually we define flex:1;

It means these three ;

3.1 order attribute

html Code :
<div class="box4">
<div class="box-item1 ">1</div>
<div class="box-item1 order">2</div> /* Notice that the second element has Order class */
</div>
css Code :
.box4{
background: gold;
margin: 1px;
display: flex;
}
.box-item1{
flex:;
line-height: 100px;
background: #ccc;
color: white;
text-align: center;
margin: 5px; }
.order{
background: blue;
order: -1;
}

design sketch :

If I set it like this :

 .order{
background: blue;
order: -1;
flex-grow:; /* More of this */
}

Try the others , That's about it

Flexible Box More related articles about basic knowledge of layout

  1. RabbitMQ,Apache Of ActiveMQ, Ali RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis You can also implement message queuing ,RabbitMQ Application scenarios and basic principles of ,RabbitMQ Details of basic knowledge ,RabbitMQ Bu Shu

    Introduction to message queue and common message queue 2017-10-10 09:35 operating system / client / Face recognition One . Message queue (MQ) summary Message queue (Message Queue), It is an important component of distributed system , Its common use scenarios can ...

  2. RabbitMQ Details of basic knowledge

    What is? MQ? MQ Its full name is Message Queue,  Message queue (MQ) It's an application to application communication method .MQ It's consumption - A typical representative of the producer model , One end keeps writing messages to the message queue , And the other end can read from the queue ...

  3. Cisco Basic knowledge of routing technology

    The first part Please write out 568A The line order of ( It should be on the first day of Internet contact , As long as you pinch it , I can think of it all ) . network card MAC Address length is (  ) Binary bits (16 Base and 2 The conversion relation of base system , Just another way , You don't have to count it with a pen ) A.12  ...

  4. Python Details of basic knowledge From entry to mastery ( 7、 ... and ) Classes and objects

    This article mainly introduces python, The contents can be seen in the table of contents and other basic knowledge , Welcome to my other articles Python Details of basic knowledge From entry to mastery ( One ) Introduce Python Details of basic knowledge From entry to mastery ( Two ) Basics Python The basic knowledge is detailed ...

  5. Live one :H.264 Basic knowledge of coding

    One . Basic concepts of coding 1. Why video coding ? Video is made up of frames of images , As is often the case gif picture , If you open one gif picture , It's made up of many pictures . General video in order not to let the audience feel stuck , At least one second 16 frame ...

  6. Redis Details of basic knowledge ( Not the original )

    Outline of the article One .Redis Introduction 2 .Redis Install and set the boot to automatically start three .Redis File structure 4 .Redis Start mode five .Redis Persistence six .Redis Configuration file details 7 .Redis Graphical tool 8 .Java And Jedi ...

  7. The first 157 God :canvas Details of basic knowledge

    Catalog One .canvas brief introduction 1.1 What is? canvas?( understand ) 1.2 canvas Main application areas ( understand ) Two .canvas Basis of drawing 2.0 sublime To configure canvas plug-in unit ( recommend ) 2.1 Ca ...

  8. Maven Details of basic knowledge

    1. brief introduction Maven stay Java The field of application has been very wide , With Maven The existence of is that developers are building . rely on . It's very easy to expand and package projects . 2. Windows install Maven Download installation package http ...

  9. 【 dried food 】 Talk in vernacular JavaSE — ArrayList In depth analysis and Java Details of basic knowledge ( Two )

    In the last section , Let's briefly explain Java Some basic knowledge of , Like polymorphism , Interface implementation, etc . then , Demonstrated ArrayList A few basic methods to solve this problem . ArrayList It's a collection framework , The bottom layer is actually an array , This point , Official documents ...

Random recommendation

  1. css Crazy memory

    Next to the last one html Crazy memory , The same is DIV+CSS Traditional site development , It's just a collection . Arrangement ... CSS Background properties (Background) attribute describe CSS background Set all background properties in one declaration ...

  2. Yes, I have add My file is not tracking

    Record every update to warehouse Now we have a real project in hand Git Warehouse , And took the working copies of all the files from the warehouse . Next , Make some changes to these documents , After completing the goal of one stage , Submit this update to the warehouse . please remember , Work ...

  3. TypeScript Learning notes ( Four ): function

    Let's take a look at this note TypeScript The function in . Function type stay JavaScript There are two ways to define functions in , as follows : // Name the function function add(x, y) { return x+y; } ...

  4. 1.1C++ introduction To be continued ...

    first C++ Program : #include<iostream> int main() { std::cout << "Hello World !" << ...

  5. Jmeter send out json{Jfinal Interface req rsp Are all json}

    Link address :http://yangyoupeng-cn-fujitsu-com.iteye.com/blog/2013649 Use jmeter send out json data . There are three ways   original , Reprint please indicate the source 1. utilize ...

  6. unity3d ngui-TweenRotation-TweenPosition-TweenScale

    using UnityEngine; using System.Collections; public class TweenFlipCARDS : MonoBehaviour { private f ...

  7. Java Calendar.set Method setting time

    Because of the needs of the project , You need to traverse a few months of the year , Get the number of users per month .   The variables are : Starting time --startDate, End time --endDate. The logic is simple : Get the month of the start time and the month of the end time , And then we get the month difference ...

  8. (CLR-Via-C#) Type basis

    CLR Requires that each type ultimately derive from System.Object Object The public methods provided : Equals: If two objects have the same value , Just go back to true GetHashCode: Returns the hash code of the object ToStr ...

  9. Go Linguistic map How to determine key Whether there is

    The way to judge is value,ok := map[key], ok by true There is package main import "fmt" func main() { demo := map[ ...

  10. Accumulator&lt;Long&gt; implements of JavaSparkContext in Spark1.x

    As we all know , up to Spark 1.6.2, JavaSparkContext only provides two kinds of accumulators: Intege ...