flex布局
flex布局与grid布局的区别flex
flex布局与grid布局的区别
grid适用于大型布局，flex适用于小型布局
flex
弹性盒模型：display:flex，排列方式根据主轴方向排列。子元素超出默认不换行，而是进行压缩flex-direction 弹性盒模型主轴方向设置 row（默认）---- 从左到右（侧轴：从上到下） row-reverse ---- 从右到左（侧轴：从上到下） column ---------- 从上到下（侧轴：从左到右） column-reverse 从下到上（侧轴：从左到右）flex-wrap 子元素超出父级，换行问题 nowrap (默认值) -----不换行 wrap --------------------正常换行 wrap-reverse ---------反向换行 正常换行：按照侧轴方向换行。反向换行：按照侧轴反方向换行flex-flow 主轴方向设置 换行方式（即以上两个的复合属性）justify-content 主轴的对齐方式 flex-start(默认值) 元素沿着主轴的开始方向进行排列，富裕空间保持在主轴方向的结束 flex-end 元素排列在主轴方向的结束位置，富裕空间保持在主轴方向的开始位置 center 元素排列在主轴中间，富裕空间平均分布在两侧 space-between 子级平均分配在主轴上，富裕空间平均分派在子级之间 space-around 富裕空间平均分配在子级的左右两边 富裕空间：多出的部分的空间（content+padding+border+margin 之外的）align-items 侧轴的对齐方式（一般默认不换行。所以侧轴算单个） stretch(默认值): 拉伸，撑满侧轴 flex-start：侧轴上起点对齐 flex-end：侧轴上终点对齐 center：侧轴居中对齐 baseline：基线对齐，根据侧轴文字基线进行对齐align-content 侧轴对齐方式，针对多轴（有换行的那种） flex-start：排列在侧轴开始位置 flex-end：排列在侧轴结束位置针对子级 order：n ，定义子级排列顺序，数值越小，越靠前针对子级伸缩性设置： 如果父元素放不下子元素：会对全部子元素进行同比例压缩 flex-basis ：px 初始值，大于width则会覆盖原width flex-grow：n 如果父级有富裕空间，会放大子元素。数字越大放大越多 flex-shrink: n 父级空间不够，会压缩子元素。数字越大压缩越狠
#box div:nth-child(1) {
flex: none
;
}
#box div:nth-child(2) {
flex: 2
;
}
#box div:nth-child(3) {
flex: 3
;
}
#box div:nth-child(4) {
flex: 4
;
}
#box div:nth-child(5) {
flex: 5
;
}
flex计算：计算父级剩余空间（父级宽度-子元素的margin和）
五个子元素margin：1px 父元素width：700 则剩余空间为790
flex：none不伸缩，不加入计算
则790/15=46 ，即每份flex宽度为46
flex-basis：px 初始值，大于width则会覆盖原width
如果父元素放不下子元素：会对全部子元素进行同比例压缩
flex-grow：n 如果父级有富裕空间，会放大子元素。数字越大放大越多
flex-shrink: n 父级空间不够，会压缩子元素。数字越大压缩越狠
margin：auto auto ------- 子级上下auto会平分上下富裕空间，左右auto会平分左右富裕空间针对子级侧轴设置：align-self： stretch(默认值): 拉伸 flex-start：侧轴上起点对齐 flex-end：侧轴上终点对齐 center：侧轴居中对齐 baseline：基线对齐，根据侧轴文字基线进行对齐
老版本弹性盒模型
box-orient：horizontal || vertical 水平还是垂直排列，类似flex-directionbox-direction：normal || reverse 是否颠倒顺序，类似flex-direction：row-seversebox-pack：start || end || center || justify 主轴方向对齐，类似justify-contentbox-align：start || center || end 交叉轴方向对齐，类似align-items
