flex布局,弹性布局(上)

今天在睡懒觉、上课、然后打了一晚上游戏中度过了,导致到现在我今天的笔记依然没写。。。眼看时间实在不允许了,就加先设定个标题明天再写吧。恩!就这么办吧!

在我的上一篇内容中我又提到过flex布局,这里就接上上一篇的内容写一下这个内容。其实在这个内容上我的文章可能并不是很好的学习文章(这个内容最好还是图文结合才能很好的理解,我实在做不出合适的图,哭),在这里我推荐大家去百度一下看看别的内容会更好。

学习flex布局具体的属性这些内容之前,我们先要学习两个概念性的内容。

1,容器(flex container)和 项目(flex item)

flex布局简单来说就是一个父元素和数个子元素,父元素和子元素都有一些属性,设定后就会呈现出一种布局的方法。而这里的父元素就是容器,子元素就是项目。这个概念搞懂了其实就很容易理解了,flex布局中容器和项目也各有各自不同的属性。

2,主轴(main axis)和 交叉轴(cross axis)

在容器中又存在两条轴,主轴(main axis)和交叉轴(cross axis)。这两个轴属于概念性的东西,在视图上不会显示,但却是后面许多属性的基准。在默认情况下可以简单的当成直角坐标系中的X轴和Y轴(就是主轴是从左到右,交叉轴从上到下)。

主轴起始位置和容器边界交接处叫main start,结束位置和容器边界交接处叫main end;交叉轴其实位置和容器边界交接处叫cross start,结束位置和容器边界交接处叫cross end。其实就是很直白的内容,开始就是start,结束就是end。这个概念在后面的属性中非常重要所以这里多提一下。

这篇文章我本来打算一次写完的,但感觉这个内容实在有点多,就先写上这些前置内容,把剩下的部分单独再写一次吧(其实我就是感觉有点多想混一下)。但这里我还是得说一下我不推荐大家通过我这篇文章学习这一内容,我的文章大多是一种对自己理解的总结和复习,本就不那么严谨和专业,同时这一内容是需要图文结合的,不然真的很难理解。

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容

  • 布局的传统解决方案:是基于盒模型,这种布局依赖display属性 + position属性 + float属性,但...
    kim_jin阅读 1,299评论 1 18
  • 花花是一条狗。牙牙在污水管内发现它的时候,它已经奄奄一息,瘦得只剩下一身骨头了。牙牙虽不是那种爱心泛滥的慈善家,但...
    上官乔安阅读 375评论 0 0
  • 有句话叫“由俭入奢易,由奢入俭难”, 从节俭变得奢侈是容易的,从奢侈变得节俭却困难了。这句话在很多方面都说得通。 ...
    薛薛闲扯阅读 327评论 0 0
  • 电视剧中的一个情节。他们之前深深相爱,后来由于种种原因黯然分手。后来,男人留在了香港,女人 去了异国他乡。几年后,...
    格子_阅读 191评论 0 0
  • 未完待续。。?;队钩?/div>
    vision_colion阅读 269评论 0 3