社区首页 >专栏 >CSS6：flex布局

CSS6：flex布局

代码之风

发布于 2019-03-14 02:01:02

81100

代码可运行

文章被收录于专栏：马涛涛的专栏马涛涛的专栏

运行总次数：0

代码可运行

前言：这是我看过最好的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-grow、flex-shrink、flex-basis这三个属性比较难理解，可以看30分钟彻底弄懂flex布局和深入理解flex布局的flex-grow、flex-shrink、flex-basis

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

flex-basis

flex-basis 用于设置元素在主轴上的大小（如果轴体变成从上到下，就会覆盖height）。
flex-basis: 0 表示元素根据内容撑开宽度，width不管用了。
flex-basis优先级比width高。
flex-basis为auto时，如设置了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或者width、height的长度）
然后按照扩大因子按权分配。例如有50px没有分配，两个子元素flex-grow:分别为flex-grow:3和flex-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:0和flex-basis:auto的区别。flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。总结：

flex: 1的时候，伸缩时不需要考虑width，因为flex-basis:0（元素为内容撑开的宽度），只需要按照元素的内容宽度进行等比例的伸缩。
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;
}