CSS6:flex布局

前言: 这是我看过最好的flex布局教程: 30分钟彻底弄懂flex布局

传统的布局方法与flex属性通览

文档流:块级元素独占一行,从上往下排列,行级元素从左往右排列。

display inline-block主要用来做横向的布局。 用分离负maigin用来产生位移。

元素的布局

学习flex我分成两个部分,第一个部分是元素布局。以下几个属性影响着元素的布局。

/*容器上:*/
justify-content
align-items
flex-direction
flex-wrap
flex-flow
align-content
/*元素上:*/
order
align-self

做完下面的游戏,看完下面的两篇文章,理解了上面几个属性的用法,就理解了元素的布局。他们已经写得很详细了。这里不需要我班门弄斧。 30分钟彻底弄懂flex布局 Flex 布局教程:语法篇

CSS3【Flex布局】有趣的青蛙游戏 游戏一共24关,每关把所有颜色青蛙移动到对应颜色荷叶上即可过关 通关后就会使用影响布局的属性。

伸缩与尺寸

而影响大小和伸缩与尺寸的属性flex-growflex-shrinkflex-basis这三个属性比较难理解,可以看30分钟彻底弄懂flex布局深入理解flex布局的flex-grow、flex-shrink、flex-basis

在这里记录一下自己的理解。

flex-basis

  • flex-basis 用于设置元素在主轴上的大小(如果轴体变成从上到下,就会覆盖height)。
  • flex-basis: 0 表示元素根据内容撑开宽度,width不管用了。
  • flex-basis优先级比width高。
  • flex-basisauto时,如设置了width则元素尺寸由width决定;没有设置则由内容决定。(默认就是auto)所以如果一个容器设置为flex布局,那么他里面的元素在没有设置宽高的时候,大小都由内容撑开!

详细还是看30分钟彻底弄懂flex布局讲的非常明白

flex-shrink

  • 如果不换行flex-wrap: nowrap;主轴上的元素总和超了容器宽度,那么默认会缩小。
  • flex-shrink默认是1,即缩小因子是1,也就是当不够分配时,元素都将等比例缩小占满整个宽度
  • flex-shrink是0表示这个元素不缩小,如果超了,就在其他元素上动手脚缩小。

详细还是看30分钟彻底弄懂flex布局讲的非常明白。

flex-grow

  • 默认为flex-grow:0,即,不扩大。原来是多大就是多大(flex-basic或者widthheight的长度)
  • 然后按照扩大因子按权分配。例如有50px没有分配,两个子元素flex-grow:分别为flex-grow:3flex-grow:2,那么第一个元素就分配30px,第二个元素分配20px。
  • 如果第一个元素设置flex-grow为1,另一个没有设置,那么多出来的全部的大小都会分配给第一个元素。

详细还是看30分钟彻底弄懂flex布局讲的非常明白。

flex

flex = flex-grow + flex-shrink + flex-basis 一些简写

flex: 1 = flex: 1 1 0%//
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // **常用于固定尺寸 不伸缩**

flex: 1和 flex: auto的区别

flex-grow + flex-shrink都是1的话意思就是不管是超出这一行,还是小于这一行,都按比例占满这一行(放大或缩小元素)!!

flex:1 和 flex:auto 的区别 都是按比例放大缩小,然后占满一行。 其实可以归结于flex-basis:0flex-basis:auto的区别flex-basis是指定初始尺寸,当设置为0时(绝对弹性元素),此时相当于告诉flex-growflex-shrink在伸缩的时候不需要考虑我的尺寸;相反当设置为auto时(相对弹性元素),此时则需要在伸缩时将元素尺寸纳入考虑。 总结:

  1. flex: 1的时候,伸缩时不需要考虑width,因为flex-basis:0(元素为内容撑开的宽度),只需要按照元素的内容宽度进行等比例的伸缩
  2. flex: auto的时候,伸缩时需要考虑width,按照width进行等比例伸缩

举例:flex:1应用:

    <ul id="container">
        <li id="item"></li>
        <li id="item"></li>
        <li id="item"></li>
    </ul>
#container{
    display: flex;
    flex-wrap: nowrap;
    width: 200px;
    height: 200px;
    background-color: orange;
}

#item:nth-child(1){
    flex:1;/*这里*/
    width: 100px;

    height:100px;
    background-color: blue;
}
#item:nth-child(2){
    flex:1;/*这里*/
    width:50px;

    height:100px;
    background-color: green;
}
#item:nth-child(3){
    /* flex:1; *//*这里没写*/
    width:30px;

    height: 100px;
    background-color: #ccc;
}

前两个元素将剩余的空间平局分了,因为没有内容,显示的宽度都是0,于是两个元素分得的扩大像素一样,所以平分了。

而如果是flex:auto,那么将会根据width按比例伸缩,占满一行。

flex布局套路学习

Flex 布局教程:实例篇

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券