练习flex布局中的思考

总结一下

布局时候,我们使用的标签,都是容器

  • 父容器(.grid
  • 子容器(.grid-cell
    有一个思想,父容器标签,可以使用padding留白,但是如果父容器中有子容器,那么子容器应当抵消掉父容器的留白,以保证内容大小符合预期。

一句话:即,由父容器标签决定内容呈现区域,子容器没有这个权利。

这样的做法,在我们根据设计图实现视图时,会更加方便
同时,如果我们去设计ui也更加方便。

真正的显示内容,要放在子容器中,而不能直接暴露给父容器,以保证正确的可复用的布局

可以在子容器中嵌套一个新的.grid继续对子容器的空间进行布局

具体的属性

父容器属性:

  • flex-wrap
    多个子容器宽度超了,换不换行
  • flex-direction
    控制流方向

此属性常用在网站整体的布局,头部,中部,页脚的模式,在不同设备上可能有不同的显示需求。
比如圣杯布局,小屏幕我们需要纵向排布,大屏幕则改为横向。
通过@media,可以很容易实现。

  • align-items 和 justify-content
    宏观调控item的位置,前者为纵轴对齐方式,后者为横轴对齐方式

通过他们的配合,能构造出很多布局效果。

比如垂直居中

子容器(项目)属性:

  • order
    优化SEO

我们将最主要的内容标签书写前,通过order控制显示位置

  • flex
    通常:
    flex: 1;放大,自适应位置,宽度
    flex: none不放大,自适应位置
    flex: 0 0 n% 响应式布局——控制项目宽度。类似bootstrap

当然,还有其他的,比如,缩小后,突出某个项目

类似这样的具体到项目的排版布局。

  • align-self

兼容性

如何处理,源码

移动优先

@media( min-width ) ,就是移动端优先,这其实不是什么关键问题,是不是在开发中移动端优先,取决于项目需求。

比如,开发一个markdown书写文章的软件,重点就偏移到大屏了,而不是移动端。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,106评论 1 91
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 2,297评论 0 59
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,486评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,872评论 0 26
  • 未知的,都很有趣。 你,不满也不空,刚刚好,也许还有更多空间。有些人自带某种属性,比如自己,天性敏感又多思...
    邪恶的刘小斗阅读 440评论 2 3