关于css3:css-flex-容器盒子总结

6次阅读

共计 668 个字符,预计需要花费 2 分钟才能阅读完成。

css flex 容器盒子总结 (很有用,工作中常常用到)

  1. display: flex (块布局)| inline-flex(行内布局);
  2. flex-direction: row(默认值) | row-reverse | column | column-reverse; 决定主轴的方 向 (即我的项目的排列方向)
  3. flex-wrap: nowrap(默认值) | wrap | wrap-reverse; 决定容器内我的项目是否可换行
  4. flex-flow: 这个属性根本没啥用
  5. justify-content:flex-start(左对齐 - 默认值) | flex-end(右对齐) | center(居中) | space-between(两端对齐)|space-around(每个我的项目两侧的距离相等); 定义了我的项目在主轴的对齐形式。
  6. align-items:flex-start(穿插轴终点对齐)| flex-end(穿插轴起点对齐) | center (穿插轴中点对齐)| baseline(我的项目的第一行文字的基线对齐) | stretch(若子项目无设置高度,则 100% 占满容器高度, ( 默认值)); 定义了我的项目在穿插轴上的对齐形式
  7. align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值); 多根轴线的对齐形式,如果我的项目只有一根轴线,那么该属性将不起作用 (即当 flex-wap 设置为 wap 可换行的状况下,align-content 才无效,即在穿插轴上的对齐形式)

先总结这么多,有工夫了减少图例解释

正文完
 0