----------------------------- ------------------- elastic layout -----------------------------------
1, the elastic defined layout (defined on the parent)
the display: Flex;
If the webkit kernel must be preceded by -webkit-flex
-------------------------------------------------- -------------------------------------------------- -
2 after setting the layout of an elastic, css sub-elements in the float, clear, vertical-align these properties will fail.
--------------------------------------------------------------------------------------------------
3, the layout can flex elastically as a large box, namely a large container, as long as it is defined as display: flex; i.e., it contains all the sub-elements are automatically members of the container, termed professional items
--------------------------------------------------------------------------------------------------
4, by default, the items are arranged horizontally inside the container, i.e. the arrangement according to the spindle, and the clockwise direction. Required (1,2,3) i.e. x-axis direction. (Default all-direction Flex: Row;)
<div class = "Box">
<div class = "boxone">. 1 </ div>
<div class = "boxtwo"> 2 </ div>
<div class = "boxthree">. 3 </ div>
</ div>
css style:
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
}
.boxone{
width: 100px;
height:200px;
background: red;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}
Renderings:
-------------------------------------------------- ------------------------------------------------
5, If you need it the opposite of arrangement (3,2,1) are arranged, then you need to use flex-direction: row-reverse; ( and we all float: right; the same effect)
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:row-reverse;
}
--------------------------------------------------------------------------------------------------
6, in addition arranged in the major axis direction, and arranged in the y-axis direction.
Plus flex-direction: column;
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-direction:column;
}
7. Similarly, the y-axis direction in reverse order: flex-direction: column-reverse;
8, when too many of our projects inside the container. This time we will find. These projects are pushed together. The width of the project itself did not work. Above html code, I joined several boxes we go.
9、怎样才能让这些盒子本身的宽度起到作用，一行排不到，能够自动的排第二排呢？这边就需要用到弹性布局中的换行。flex-wrap:wrap;
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-wrap:wrap;
}
flex-wrap：nowrap; (不换行)
flex-wrap：wrap;（换行）
flex-wrap：wrap-reverse;（倒序换行）
倒序换行效果：
10、上面的换行默认情况是以x轴换行的，当然还有以y轴来换行的，也就是说，第一列排满了之后，再排第二列。
此时就需要用到flex-flow:row nowrap;(默认情况) flex-flow:column wrap;(y轴换行) flex-flow:column wrap-reverse;(倒序y轴换行)
y轴换行
.box{
width: 500px;
height:400px;
background: pink;
display: flex;
flex-flow:column wrap;
}
倒序y轴换行：
11、那在css中的位置关系，水平方向的左中右，垂直方向的上中下 ，用弹性布局怎么实现呢？这里就给大家介绍弹性布局怎样来实现的。首先看水平反向：
水平方向布局
justify-content:flex-start; 水平左
justify-content:center; 中
justify-content:flex-end; 水平右
justify-content:space-around; 居中显示，两边也空有间隙
justify-content:space-between; 两边不留空隙
依次看下效果：
justify-content:flex-start; 水平左 （默认的）
justify-content:center; 中
justify-content:flex-end; 水平右
justify-content:space-around; 居中显示，两边也空有间隙（且是均等的）
justify-content:space-between; 两边不留空隙（平均排列的）
垂直方向布局
align-items:flex-start; 上
align-items:center; 中 （比起css样式，垂直反向居中flex弹性布局是个不错的优势）
align-items:flex-end; 下
这边就演示一个垂直底部：
但是以上的垂直位置排版必须建立在一个前提条件下，即 单行 只有一行 。对于多行，即换行的，表现出来的样子并不是我们需要看到的
如下：
<div class="box">
<div class="boxone">1</div>
<div class="boxtwo">2</div>
<div class="boxthree">3</div>
<div class="boxone">1</div>
<div class="boxtwo">2</div>
<div class="boxthree">3</div>
</div>
.box{
width: 500px;
height:800px;
background: pink;
display: flex;
flex-wrap:wrap;
align-content:center;
}
此时对于多行的，我们用另外一个属性。即align-content:center; 其他上 ，下 也是一样的，如果是多行的话，即把items改成content 即可 其他几个也是一样的
12、order属性
定义项目的排雷顺序，order的值越小，排列在越前面。 这个属性是写在需要换顺序的子集上的，也就是项目上的。默认为0；
<div class="box">
<div class="boxone">1</div>
<div class="boxtwo">2</div>
<div class="boxthree">3</div>
</div>
.box{
width: 500px;
height:600px;
background: pink;
display: flex;
flex-wrap:wrap;
align-items:center;
}
.boxone{
width: 100px;
height:200px;
background: red;
order:3;
}
.boxtwo{
width: 100px;
height:200px;
background: orange;
order:1;
}
.boxthree{
width: 100px;
height:200px;
background: yellow;
}
