flex 布局实用性知识点

flexBox 布局最合适小规模布局，而网格布局适合较大规模布局。

float,clear,vertical-align 在flex中不起作用。

flex布局中，有两类作用于父节点也子节点的样式，大部分简单的布局只要把父节点写好了，子节点是没有多大问题的。

常用的父节点样式有：
display: flex /声明布局方式/
flex-direction：row | column /规定主轴的显示方向/
flex-wrap: nowrap | warp /是否换行/
justify-content: flex-start /水平排列样式/
align-items: center /垂直排列样式/

常用的子节点样式有：
order：9 /子节点的显示顺序/

felx采用的是弹性布局，在声明一个元素的display属性为flex的时候，浏览器在元素内计算两天轴来，两条方向轴根据flex-direction属性的值决定是纵轴位主轴还是横轴为主轴。我们只要设置到子节点的方向轴，就可以控制子节点的显示方向。

举个桔子：

个你满分我都觉得不够，可以的话，我希望能再给你10分！继续努力，继续加油！

一个div内有一段文字，要让这段文字垂直居中，以往的写法一般是这样：
.judgesComments{
width:70%
height:80px;
}
.judgesComments>comments{
line-heigth:80px; /垂直居中，事实上这样的垂直居中并不是真正的垂直居中，可能还需要加个padding，如果屏幕的高度不一样，还需要再调整/
color: white;
font-family: "微软雅黑";
font-size: 22px;
margin: 0 auto;
word-wrap: break-word;
overflow: hidden;
}

如果用flex写：
.judgesComments{
width: 70%;
height: 80px;
display: flex; /声明布局方式/
align-items: center; /垂直居中，妥妥的，不会根据屏幕大小而受到影响/
}
.judgesComments>.comments{
color: white;
font-family: "微软雅黑";
font-size: 22px;
margin: 0 auto;
word-wrap: break-word;
overflow: hidden;
}

黄色框中的文字就是使用flex布局做到的。

wxid_rzd5emhlvyn722_1467956291206_44.png

再举个稍微复杂的桔子：

多列多行显示的布局，应该怎么设置呢？

wxid_rzd5emhlvyn722_1467958801868_13.png

有人说，有得着套这么多层吗？可以留言我们探讨一下，或许您有更好的方法呢。我的想法是，多嵌套几层，方便调整：
html:( 第二层控制第三层的显示方向；第三层控制第四层的显示方向)

个你满分我都觉得不够，可以的话，我希望能再给你10分！继续努力，继续加油！

92分

css样式：
css:
/第一层样式/
.contentRight {
display : flex ; /第一层，要定义布局方式/
}
/第二层样式/
.scoreRight {
width : 78 %;
height : 100 %;
display : flex ; /第二层，同样要定义布局方式/
flex-direction : column ; /声明第二层主轴的方向，是按Y轴来排列：竖排，用来控制第三层的显示方向/
justify-content : flex-start ; /声明第二层主轴的排列方式，水平起始位置/
align-items : center ; /副轴的排列方式，Y轴居中/
margin-top : 10 %;
}
/第三层样式/
.scoreRight > .judgesList{
display : flex ; /第三层，同样要定义布局方式/
flex-direction : row ; /第三层，就是效果图，的主轴方向，是按 X轴来排列：横排，用来控制第四层的显示方向/
justify-content : flex-start ; /横排的起始方向，水平起始位置/
align-items : center; /副轴的排列方式，Y轴居中/
margin-bottom : 3 %;
}
/下面是第四层样式/
.scoreRight > .judgesList> .judgesHead {
width : 84 px;
height : 84 px;
border-radius : 6 px;
margin-right : 6 %;
}
/垂直居中/
.scoreRight > .judgesList> .judgesComments {
width : 70 %;
height : 84 px;
display : flex ;
align-items : center;
}
.scoreRight > .judgesList> .judgesComments >.comments {
color : white;
font-family : "微软雅黑" ;
font-size : 22 px;
margin : 0 auto ;
word-wrap : break-word ;
overflow : hidden ;
}
.scoreRight > .judgesList> .judgesScore {
width : 84 px;
height : 84 px;
color : white;
font-family : "微软雅黑" ;
font-size : 24 px;
display : block ;
line-height : 74 px;
margin-left : 10 px;
}

可以很方便进行水平和垂直方向的，居左，居中，居右，两边对齐等效果。
如果要想让其它浏览器支持，flex布局属性，都需要加上浏览器前缀。