flex布局详解

display:flex 布局　

　　X轴 称为主轴
　　Y轴 交叉轴

　　display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

　　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

　　　　flex的六个属性
　　　　　　　　flex-direction 决定主轴的方向（即项目的排列方向）
　　　　　　　　　　1：flex-direction:row;(默认值) 主轴水平方向，起点在左端　　　　　　　　　

　　　　　　　　　　2 : flex-direction:row-reverse；主轴水平方向，起点在右端

　　　　　　　　　　3：flex-direction:column; 主轴垂直方向，起点在上边沿

　　　　　　　　　　4：flex-direction:row-reverse;主轴垂直方向，起点在下边沿

 

　　　　　　　　flex-wrap 定义换行情况(默认不换行)
　　　　　　　　　　1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；

　　　　　　　　　　2：flex-wrap: wrap; 元素换行 第一行在下方,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

　　　　　　　　　　3 : flex-warp: warp-reverse; 元素换行 第一行在下方

 

　　　　　　direction与wrap 可以简写为 flex-flow direction属性 wrap属性
　　　　　　　　例如 flex-flow row wrap

　　　　　　　　justify-content 定义项目在主轴上的对齐方式
　　　　　　　　　　1：justify-content : center ; 居中对齐

　　　　　　　　　　2：justify-content : flex-start; 左对齐

　　　　　　　　　　3：justify-content : flex-end;右对齐

　　　　　　　　　　4：justify-content : space-between;两端对齐，项目之间间隔相等

　　　　　　　　　　5：justify-content : space-around;每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍

　　　　　　　　　　6 : justify-content : space-evenly ; 每个项目空间距离一样

 

　　　　　　　　align-items 定义在交叉轴上的对齐方式

　　　　　　　　　　# 起点会根据flex-direction的值会进行起点的改变

　　　　　　　　　　1：align-items : flex-start; 起点对齐

　　　　　　　　　　2：align-items : flex-end; 终点对齐

　　　　　　　　　　3：align-items : center; 中点对齐

　　　　　　　　　　4：align-items : baseline; 项目的第一行文字的基线对齐

　　　　　　　　　　5 : align-items : stretch ; (默认值) 如果项目未设置高度或设为auto，将占满整个容器的高度。 

　　　　　　　　align-content 定义多根轴线的对齐方式

　　　　　　　　　　如果项目只有一根轴线，该属性不起作用。
　　　　　　　　　　所以，容器必须设置flex-wrap：···；

　　　　　　　　　　1:align-content: flex-start; 与交叉轴的起点对齐。

　　　　　　　　　　2:align-content: flex-end; 与交叉轴的终点对齐。

　　　　　　　　　　3:align-content: stretch; 轴线占满整个交叉轴。

　　　　　　　　　　4:align-content: center; 默认值。与交叉轴的中点对齐

　　　　　　　　　　5:align-content: space-between;与交叉轴的两端对齐，轴线之间的间隔平均分布；

　　　　　　　　　　6:align-content: space-around;每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

　　　　　　flex常见属性总结

　　　　　　　　Positional alignment
　　　　　　　　　　justify-content: center; :居中排列
　　　　　　　　　　justify-content: flex-start; /* 从行首起始位置开始排列 /
　　　　　　　　　　justify-content: flex-end; / 从行尾位置开始排列 */

 

 

flex 子元素属性

　　　　　　order
　　　　　　　　# 用于做容器的排序
　　　　　　　　语法:
　　　　　　　　　　.item{
　　　　　　　　　　　　order:<num>; /*默认值为0*/
　　　　　　　　　　}
　　　　　　　　排序:
　　　　　　　　　　从小至大

　　　　　　flex-grow
　　　　　　　　# 对剩余空进进行分配
　　　　　　　　语法:
　　　　　　　　　　.item{
　　　　　　　　　　　　flex-grow:<num>; /*默认为0 不分配任何剩余空间*/
　　　　　　　　　　}

　　　　　　flex-shrink
　　　　　　　　# 缩小比例
　　　　　　　　语法:
　　　　　　　　　　.item{
　　　　　　　　　　　　flex-shrink:<num>; /*默认为1 如果空间不足,该项目将缩小 0不压缩*/
　　　　　　　　　　}


　　　　　　flex-basis
　　　　　　　　# 当与flex-direction:row或flex-direction:row-revers搭配 当做宽(width)
　　　　　　　　# 当与flex-direction:column或flex-direction:column-revers搭配 当做高(height)
　　　　　　　　# 与width和height的区别:
　　　　　　　　　　flex-basis优先级高于width与height
　　　　　　　　　　如果flex-basis设为auto则优先级让给width与height
　　　　　　　　语法:
　　　　　　　　　　.item{
　　　　　　　　　　　　flex-basis:<num>px/%...
　　　　　　　　　　　　}

　　　　　　flex
　　　　　　　　# 简写属性 等于 flex-grow flex-shrink flex-basis
　　　　　　　　　　flex:auto # 依照可用空间平均伸缩
　　　　　　　　　　　　# flex-grow:1
　　　　　　　　　　　　# flex-shrink:1
　　　　　　　　　　　　# flex-basis:auto

　　　　　　　　　　flex:initial  # 不能生长,单是缺乏空间时可以缩小
　　　　　　　　　　　　# flex-grow:0
　　　　　　　　　　　　# flex-shrink:1
　　　　　　　　　　　　# flex-basis=auto

　　　　　　　　　　flex:none  # 完全不能伸缩,僵化
　　　　　　　　　　　　# flex-grow:0
　　　　　　　　　　　　# flex-shrink:0
　　　　　　　　　　　　# flex-basis=auto

　　　　　　　　　　flex: num # 能屈能伸,依照num断定生长比例
　　　　　　　　　　　　# flex-grow:num
　　　　　　　　　　　　# flex-shrink:1
　　　　　　　　　　　　# flex-basis:0

　　　　　　align-self
　　　　　　　　# 覆盖父节点的align-items属性 以当前为准
　　　　　　　　可选属性:
　　　　　　　　　　auto
　　　　　　　　　　　　设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch。
　　　　　　　　　　flex-start
　　　　　　　　　　　　flex 元素会对齐到 cross-axis 的首端。
　　　　　　　　　　flex-end
　　　　　　　　　　　　flex 元素会对齐到 cross-axis 的尾端。
　　　　　　　　　　center
　　　　　　　　　　　　flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出。
　　　　　　　　　　baseline
　　　　　　　　　　　　所有的 flex 元素会沿着基线对齐，The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line。
　　　　　　　　　　stretch
　　　　　　　　　　　　flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。

 

搭配flex 自动margin盒子示例 

　　# 一行使代码居中顶置等

 

.father_box{
    display:flex;
    /* 以下属性仅为展示所用 */
    width: 100px;
    height: 100px;
    border: #000000 solid;
}        

.son1_box{
    margin-top: auto; /* 盒子会被推到地点下方 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: red solid
}                

.son2_box{
    margin-left: auto; /* 盒子会被推到右边尾端 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: blue solid
}            
            
            

.son3_box{
    margin-left: auto;
    margin-right: auto; /* 盒子会在父容器的顶端居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}

.son4_box{
    margin-top: auto;
    margin-bottom: auto; /* 盒子会在父容器的左侧居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}
    
.son5_box{
    margin-left: auto;
    margin-right: auto;
    margin-top: auto; /* 盒子会在父容器的下侧居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}        
            
.son6_box{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto; /* 盒子会在父容器的右侧居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}

.son7_box{
    margin: auto; /* 盒子会在容器正中间 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}