1.flex布局
开启弹性盒布局display:flex 容器自动成为弹性容器
弹性元素沿着主轴方向进行排列 默认方向为水平方向
主轴:弹性元素始终沿着主轴方向排列,默认是水平轴,可以更改
交叉轴:默认垂直方向为交叉轴
2.弹性容器属性
1.flex-direction
设置主轴排列方向 水平或垂直
row 默认主轴方向为水平方向
column 设置主轴方向为垂直方向
row-reverse 将水平方向的主轴方向进行反转,将起点和终点进行交换
column-reverse 将垂直方向的主轴方向进行反转,将起点和终点进行交换
2.flex-wrap
设置弹性元素是否换行显示,默认不换行(nowrap)
当父容器的宽度不足以放下所有弹性元素时 不会换行显示 会进行等比例压缩
wrap换行
wrap-reverse 换行反转
3.flex-flow
是flex-direction和flex-wrap的简写
flex-flow: column nowrap;//表示垂直排列不换行
4.justify-content
更改主轴的对齐方式
flex-start 从行首开始排列 每行第一个弹性元素与行首对齐 同时所有后续的弹性元素与前一个对齐。
flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
center 主轴中间对齐
space-around 中间两个弹性元素空间是左右弹性元素空间的两倍
space-evenly 空间均匀分配 弹性元素左右两侧空间相等
space-between 最左侧最右侧的弹性元素紧贴父容器
stretch 拉伸平铺对齐 默认会占满父容器高度 给弹性元素设置height streth失效
5.align-items
更改交叉轴对齐方式
flex-start 上对齐
flex-end 下对齐
center 居中对齐
stretch平铺拉伸
baseline 基线对齐 弹性元素文字对齐
7.align-content
更改多行弹性元素对齐方式
stretch 平铺拉伸沾满父容器的高度 前提是取消高度
flex-start 多行起点对齐
flex-end 多行弹性元素居中对齐
space-around 中间两个弹性元素空间是左右弹性元素空间的两倍
space-evenly 空间均匀分配 弹性元素左右两侧空间相等
space-between 最左侧最右侧的弹性元素紧贴父容器
3.弹性元素属性
1.order
更改弹性元素排列顺序
order 默认order为0
值越大 越靠后 值越小 越靠前
2.flex-grow
当父元素有剩余空间时候 是否放大
默认不放大 默认值为0
div{
flex-grow:1
}
p{
flex-grow:2
}
/*将父元素剩余空间分为3份 div占1 p占2*/
3.flex-shrink
当父元素宽度不足以放下所有弹性元素 是否会等比例压缩
默认等比例压缩 默认值1
设置flex-shrink:0; 不进行等比例压缩 保持原有宽度
4.flex-basis
给弹性元素设置宽度 优先级高于width 默认是auto
5.align-self
表示在自身交叉轴的对齐方式
6.flex
flex属性是flex-grow flex-shrink flex-basis属性缩写
flex 0 1 400px; 表示意思就是不进行放大 等比例压缩 宽度设置为400px
flex:number;
设置给一个弹性元素:表示将父元素容器剩余宽度设置给弹性元素
设置给多个弹性元素 表示就是弹性元素之间的倍数关系
.div{
flex:1;
}
.div2{
flex: 2;
}
/*表示弹性元素2宽度是弹性元素1宽度的2倍*/