Flex布局
Flex的组成
1,弹性容器: display:flex;
特点:默认的高度和宽度:宽度跟父元素一样高度由内容撑开
2,弹性盒子: 弹性容器的最近一级的子元素
特点:
1,默认宽度由内容撑开,默认的高度为父元素的高度
2,弹性盒子没有块级和行内的区分,通通都是弹性盒子(可以设置宽高,一行显示多个)
3,默认不换行
对齐方式
一 , 主轴对齐方式
改变主轴对齐方式的属性:justify-content
属性值:
1,flex-start 默认值,从左边开始显示
justify-content: flex-start;
2,flex -end 让弹性盒子整体,显示在弹性容器最右边
justify-content: flex-end;
3,center 让弹性盒子整体,显示在弹性容器中间
justify-content: center;
4,space-around 让空白空间环绕在弹性盒子的两侧----第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的50%
justify-content: space-around;
5,space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个弹性盒子和最后一个弹性盒子与弹性容器间的距离为0
justify-content: space-between;
6,space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等
justify-content: space-evenly;
二 , 侧轴对齐方式
侧轴对齐方式的属性:align-items
属性值:
1,flex-start 默认值
align-items: flex-start;
2,flex-end 从站点开始排序
align-items: flex-end;
3,center 垂直居中
align-items: center;
4,stretch 垂直拉伸:拉伸的高度与父盒子高度一致
align-items: stretch;
注:以上实现的前提要在父盒子中先添加弹性容器 display:flex;
伸缩比
1,所有的弹性盒子都添加flex,代表均分弹性容器的宽度
2,其他的盒子宽度固定,只给一个盒子设置flex:1--占据父元素剩余的宽度
改变主轴方向
改变主轴方向属性: flex-direction
属性值:
1, row 默认,显示水平方向 (内容从左往右)
flex-direction:row;
2, column 垂直方向 (内容从上往下)
flex-direction: column;
3, row-reverse 显示水平方向 (内容从右往左)
flex-direction: row-reverse;
4,column-reverse 垂直方向 (内容从下往上)
flex-direction: column-reverse;
注:
这时只是主轴和侧轴调换了方向:
1, 把主轴方向变成垂直方向,还是用justify-content控制主轴方向的对齐方式
2, 把侧轴方向变成水平方向,还是用align-items控制测轴方向的对齐方式
弹性盒子换行
弹性盒子换行显示: flex-wrap: wrap;
调整行对齐方式：align-content; (取值与justify-content一致)
align-content: flex-start;
align-content: flex-start;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
