前端布局 flex布局

一、什么是flex

       flex是flecible Box的缩写，意思是“弹性布局”，任何一个容易的可以用flex布局。

       当给父盒子设为flex布局之后，子元素的float，clear，和vertical-align属性将会失效

       flex操作性方便，布局简单，广泛应用于移动端的开发，pc端页面则仍主要采用传统布局。

二、flex的布局原理

       flex的原理就是通过给父盒子添加flex属性，来控制子盒子的位子和排列方式

三、常见的六个父项属性

       1、flex-direction: 设置主轴的方向

属性值	说明
row	设x轴为主轴 从左到右
row-reverse	从右到左
column	设y轴为主轴 从上到下
column-reverse	从下到上

       2、justify-content: 设置主轴上的子元素的排列方式

属性值	说明
flex-start	默认值 从头开始 即主轴是x轴时，从左到右
flex-end	从尾部开始排列
center	居中排列对齐
space-around	平分剩余空间
space-between	先两边贴，再平分剩余空间的部分

       3、flex-wrap: 设置子元素是否换行

属性值	说明
wrap	自动换行
nowrap	默认值，不换行

       4、align-content: 设置侧轴上的子元素的排列方式（多行）

             注：必须在子项出现换行的情况，即flex-wrap：wrap

属性值	说明
stretch	设置子元素高度平分父元素高度
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子元素平分侧轴的剩余空间
space-between	子元素在侧轴先两边贴，再平分剩余空间的部分

       5、align-items: 设置侧轴上的子元素的排列方式（单行）

属性值	说明
flex-start	默认值 从上到下
flex-end	从下到上
center	挤在一起居中
stretch	拉伸

       6、flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

             复合属性语法    flex-flow: row wrap;

四、flex布局子项常见属性

       1、flex属性，flex属性定义子元素分配父元素剩余的空间，用flex表示占多少份数

             .item{

                      flex:1

              }

        2、align-self 控制子项自己在侧轴上的排列方式

              align-self 属性允许单个项目于其他项目的不同排列方式，可以覆盖align-items属性。默认值为                  auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

              div span:nth-child(1){

                       align-self: flex-end;

              }

        3、order属性，定义项目的排列顺序

              项目的默认值为从0开始，数值越小，则可以排得更考前，可以设置为负数