CSS flex布局关键词记录

flex 布局 关键词释义

原理 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex-direction : 设置主轴的方向 
> row :X轴方向 默认方向 由左向右
> column :Y轴方向 由上到下

justify-content :设置主轴上子元素的排列方式
> flex-start : 默认值 从头布局
> flex-end : 从尾部开始布局
> center : 居中布局
> space-around : 平分空间
> space-between : 先两边贴边 再分配剩余空间

align-items : 设置侧轴的元素排序位置
> center : 侧轴居中
> stretch : 侧轴方向没有给出数值情况下 子元素沿侧轴拉伸
> flex-start : 侧轴方向放在开始位置
> flex-end :侧轴方向放在最后位置

flex-wrap : flex布局默认不换行,放不开就压缩子元素宽度
> nowrap : 默认值 不换行
> wrap : 换行

align-content : 设置侧轴上子元素的排列方式（多行,单行无效）
> flex-start ： 默认值侧轴头部开始排列>
> flex-end : 从侧轴尾部开始排列
> center : 默认从侧轴中间显示
> space-around : 子项在侧轴平分剩余空间
> space-beween : 子项在侧轴先分布两头，再平分剩余空间
> stretch : 设置子项元素高度平分父元素高度

flex下的子元素属性设置

flex:1; :总份数确定情况下 1占一份，2占两份
align-self：单独调整自身这一个子元素的位置
order： 默认值是0 ，设置下 谁小 谁在前

横向滚动
父级在flex布局下
overflow-x: scroll;
子级添加
flex-basis: 88px 子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸。
flex-shrink: 0 收缩比例

额外注解
white-space: nowrap 规定段落中的文本不进行换行
overflow-x: auto 横向溢出元素的内容区域添加滚动

flex简写有grow放大，shrink收缩，basis基准三个属性

顺序为 flex: grow shrink basis

0 0 40px 初始就是40px宽
不参与伸缩，与世隔绝

1 0 40px 就是初始40px宽
有多的空间的话，grow为1 是瓜分剩余空间的权重，和其他有grow的一起把剩下空间占满

0 1 40px 就是初始40px宽
不够空间的话，shrink为1 就是超出部分要扣除的权重，超出的空间和其他有shrink的一起平摊，按权重减掉

1 1 40px 就是初始40px
空间多或少都参与权重增减

不设flex的话，初始值是 0 1 auto，也就是盒子不会参与放大，只会参与收缩，容器容不下，就按权重收缩