标签
display: flex; 开启flex布局
justify-content: center; 水平居中
align-items: center; 垂直居中
flex-direction: column; 改变主轴方向,可以把水平主轴改为垂直主轴
align-self: center; 作用是改变子盒子垂直方向
flex-wrap: wrap; 子元素边距超出父盒子的话就换行显示
align-content 用来设置多行的flex容器的排列方式
属性
flex-end 盒子底部对齐
flex-start 顶部对齐
center 盒子居中
stretch 自动拉伸子元素,铺满父元素如果设置了指定的宽度就会失效
space-between 头部尾部元素与边框对齐,中间的相邻元素间距离相同
space-around 头尾两个元素距离边框的间距是各个相邻元素距离的一半
space-evenly 子盒子均匀分布,元素之间的间距相同
row 主轴方向为水平向右
column 主轴方向为竖直向下
row-reverse 主轴方向为水平向左
column-reverse 主轴方向是竖直向上。
wrap 子元素换行
flex
- flex:0 1 auto; 他有三个值第一个是flex-grow,第二个是flex-shrink,第三个是flex-basis;
- flex-grow: 1; 自动撑满父盒子的剩余空间,默认值为0
如果有三个盒子,其他两个设置flex:1;有一个设置flex:2;那么设置2的盒子的占有父盒子的空间是其他的两倍以此类推; - flex-shrink: 3; 相比其他的盒子小两倍 , 默认值是1就是不缩小
- flex-basis: 100px; 当前子盒子的宽度设置为100px,auto是默认值,就是不设置宽度;
