移动布局小结

Posted 2020-12-11 macro-renzhansheng

flex父项设置

flex-direction: // 默认主轴的方向，水平向右；侧轴垂直向下  

    row【默认值】 / row-reverse / column  / column-reverse

justify-content:space-around   //设置主轴上子元素排列方式

    flex-start【默认值】// flex-end  // space-between[两边贴边，剩余空间平分]  // center // space-around[平分]

flex-wrap:设置是否换行  wrap  nowrap[默认值]

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

父盒子：设置flex布局，子元素的floatclearvertical-alien失效

align-items : 调整子元素在侧轴上的显示方式 center/ flex-end / flex-start / stretch  [单行]  4个属性

align-content: 调整子元素在侧轴上的显示方式 center/ flex-end / flex-start / stretch  [多行，单行失效]  6个属性  + space-around  space-between

flex子项设置

flex ：子项目占的份数 定义在子元素身上，表示子项目分配父亲剩余空间

align-self：CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。  stretch  / center  /   start   /  end

order:N  //灵活改变子项目的排列顺序，但是实际结构不改变；数值越小，排列越靠前。

align-items

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。