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 }
Songzhibin