87.CSS Flex 弹性盒模型布局教程共用的css在48篇文章gird

分类：Flex作者：编程之家用户

CSS Flex 弹性盒模型布局教程

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex布局就是给任何一个容器添加 display:flex

注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

注：Safari 6.1+（前缀-webkit-） iOS 7.1+（前缀-webkit-）
最新flex 兼容性查看请点此处 最新Flex兼容性

Flex 容器 flex container 和 Flex 项目 flex item

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

前六个是容器属性，后面是项目属性。

1. flex-direction属性

flex-direction属性有四个值 row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。如下图

row-reverse：主轴为水平方向，起点在右端。

因没有给容器设置宽度，所以默认上一级父亲的宽度

.section-one-1{

display: flex;

flex-direction:row;

}

123456789

column：主轴为垂直方向，起点在上。如下图

column-reverse：主轴为垂直方向，起点在下。

.section-one-2{

display: flex;

flex-direction:column;

}

123

2.flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap属性有三个值 nowrap | wrap | wrap-reverse;

为nowrap值时，不换行。不管项目宽度值为多少，最大值也被均分在一行内

.section-two-1{

display: flex;

flex-wrap:nowrap;

}

.section-two-1 span{

width:400px;

}

123456789

为wrap值时，换行。第一行在最上面

.section-two-2{

display: flex;

flex-wrap:wrap;

}

.section-two-1 span{

width:400px;

}

123456789

为wrap-reverse值时，换行。第一行在最下面

.section-two-3{

display: flex;

flex-wrap:wrap-reverse;

}

.section-two-1 span{

width:400px;

}

123456789

3. flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.section-three-1{

display: flex;

flex-flow:column wrap-reverse;

}

123

4. justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

justify-content属性有四个值: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐

flex-end右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

具体对齐方式与轴的方向有关。默认一般从左至右，下图是flex-direction: row-reverse;从右至左

.section-four-1{

display: flex;

justify-content:space-around;

flex-direction: row-reverse;

}

1234

5. align-items属性

align-items属性定义项目在交叉轴对齐方式

flex-start交叉轴的起点对齐

flex-end交叉轴的终点对齐

center交叉轴的中点对齐

baseline项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

.section-five-1{

display: flex;

align-items:stretch;

}

.section-five-1 .one{

height:200px;

line-height:50px;

}

.section-five-1 .two{

height:100px;

line-height:50px;

}.section-five-1 .three{

height:50px;

line-height:50px;

}

1234

.section-five-2{

display: flex;

align-items:baseline;

}

.section-five-2 .one{

height:200px;

line-height:50px;

}

.section-five-2 .two{

height:100px;

line-height:50px;

}.section-five-2 .three{

height:50px;

line-height:50px;

}

1234

6. align-content属性

align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，则属性不起作用

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

.section-six-1{

display: flex;

align-content:space-between;

height: 600px;

border: 1px solid #000;

flex-flow: wrap;

}

.section-six-1 span{

width:300px;

}

在运用 align-content时，要声明换行 flex-flow:wrap

123456789

7.order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.section-seven-1{

display: flex;

}

.section-seven-1>span:first-child{

order:0

}

.section-seven-1>span:nth-child(5){

order:1;

}

.section-seven-1>span:nth-child(4){

order:2;

}

123456789

8. flex-grow属性

flex-grow属性定义项目的放大比例，默认为0。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.section-eight-1{

display: flex;

}

.section-eight-1>span:first-child{

flex-grow:1

}

.section-eight-1>span:nth-child(2){

flex-grow:1;

}

.section-eight-1>span:nth-child(4){

flex-grow:2;

}

.section-eight-1>span:nth-child(5){

flex-grow:1;

}

123456789

9. flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1.即若空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

.section-nine-1{display: flex;}

.section-nine-1 span{width:300px;}

.section-nine-1>span:first-child{flex-shrink:2;}

.section-nine-1>span:nth-child(2){flex-shrink:3;}

.section-nine-1>span:nth-child(4){flex-shrink:4;}

.section-nine-1>span:nth-child(5){flex-shrink:2;}

12345

实例解析：

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中显式定义了

.section-nine-1>span:first-child==>flex-shrink: 2;

.section-nine-1>span:nth-child(2)==>flex-shrink:3

.section-nine-1>span:nth-child(4)==>flex-shrink:4

.section-nine-1>span:nth-child(5)==>flex-shrink:5

隐式定义.section-nine-1>span:nth-child(3)==>flex-shrink:1

所以计算出来总共将剩余空间分成了 12 份，即2:3:1:4:2

我们可以看到父容器继承宽度为 1200px，子项被定义为 300px，子项相加之后即为 1500 px，超出父容器 300px。

那么超出的 300px 需要被 五个盒子消化通过收缩因子，所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。

于是我们可以计算 五个盒子 将被移除的溢出量是多少：

1 被移除溢出量：(300*2/3600)*300，即等于50px

2 被移除溢出量：(300*3/3600)*300，即等于75px

3 被移除溢出量：(300*1/3600)*300，即等于25px

4 被移除溢出量：(300*4/3600)*300，即等于100px

5 被移除溢出量：(300*2/3600)*300，即等于50px

最后1、2、3、4、5的实际宽度分别为：300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px，此外，这个宽度是包含边框的。

10.1 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

10.2 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

10.3 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

属性取值五个值：auto | flex-start | flex-end | center | baseline | stretch; 其作用和align-items 的作用一样。

放上css代码

header{
    margin:20px 0;
    text-align: center;
    font-size: 30px;
    color:#2ecc71;
}
.one{
    /*width:100px;*/
    /*height:100px;*/
    background: #1abc9c;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.two{
    /*width:100px;*/
    /*height:100px;*/
    background: #2ecc71;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.three{
    /*width:100px;*/
    /*height:100px;*/
    background: #3498db;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.four{
    /*width:100px;*/
    /*height:100px;*/
    background: #9b59b6;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.five{
    /*width:100px;*/
    /*height:100px;*/
    background:#34495e;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.six{
    /*width:100px;*/
    /*height:100px;*/
    background:#ff9966;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.seven{
    /*width:100px;*/
    /*height:100px;*/
    background:#f1c40f;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.eight{
    /*width:100px;*/
    /*height:100px;*/
    background: #e67e22;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.nine{
    /*width:100px;*/
    /*height:100px;*/
    background: #e74c3c;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.section-1{
    margin:20px 0;

}
.section-one-1{
    display: flex;
    flex-direction:row;
}
.section-one-2{
    display: flex;
    flex-direction:column;
}
.section-two-1{
    display: flex;
    flex-wrap:nowrap;
}
.section-two-1 span{
    width:400px;
}
.section-two-2{
     display: flex;
     flex-wrap:wrap;
 }
.section-two-2 span{
    width:400px;
}
.section-two-3{
    display: flex;
    flex-wrap:wrap-reverse;
}
.section-two-3 span{
    width:400px;
}

.section-three-1{
    display: flex;
    flex-flow:column wrap-reverse;
}
.section-four-1{
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
}
.section-four-1 .one{
    width:200px;
}
.section-four-1 .two{
    width:100px;
}.section-four-1 .three{
     width:400px;
 }
.section-five-1{
    display: flex;
    align-items:stretch;
}
.section-five-1 .one{
    height:200px;
    line-height:50px;
}
.section-five-1 .two{
    height:100px;
    line-height:50px;
}.section-five-1 .three{
     height:50px;
     line-height:50px;
 }

.section-five-2{
    display: flex;
    align-items:baseline;
}
.section-five-2 .one{
    height:200px;
    line-height:50px;
}
.section-five-2 .two{
    height:100px;
    line-height:50px;
}.section-five-2 .three{
     height:50px;
     line-height:50px;
 }
.section-six-1{
    display: flex;
    align-content: space-between;
    height: 600px;
    border: 1px solid #000;
    flex-flow: wrap;
}
 .section-six-1 span{
     width:300px;
 }
 .section-seven-1{
     display: flex;
 }
.section-seven-1>span:first-child{
    order:0;
}
.section-seven-1>span:nth-child(5){
    order:1;
}
.section-seven-1>span:nth-child(4){
    order:2;
}
.section-eight-1{
    display: flex;
}
.section-eight-1>span:first-child{
    flex-grow:1;
}
.section-eight-1>span:nth-child(2){
    flex-grow:1;
}
.section-eight-1>span:nth-child(4){
     flex-grow:2;
 }
.section-eight-1>span:nth-child(5){
    flex-grow:1;
}

.section-nine-1{
    display: flex;
}
.section-nine-1 span{
    width:300px;
}
.section-nine-1>span:first-child{
    flex-shrink:2;
}
.section-nine-1>span:nth-child(2){
    flex-shrink:3;
}
.section-nine-1>span:nth-child(4){
    flex-shrink:4;
}
.section-nine-1>span:nth-child(5){
    flex-shrink:2;
}

　　

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Flex 弹性盒模型布局教程</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/flex.css">
</head>
<body class="container-1200">
<section>
    <header>CSS Flex 弹性盒模型布局教程</header>
    <p>Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。</p>
    <p>flex布局就是给任何一个容器添加 <code>display:flex</code></p>
    <p><b>注：</b>设为 Flex 布局以后，子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>属性将失效。</p>
    <blockquote>
    <h1><p style="width:50%;    float: left;"><b>注：</b>Safari 6.1+（前缀-webkit-） iOS 7.1+（前缀-webkit-）<br>
        最新flex 兼容性查看请点此处 <a style="color:red;font-weight:800;" href="https://caniuse.com/#search=flex">最新Flex兼容性</a></p>
        <p style="width:50%;    float: left;">Flex 容器 <code>flex container</code> 和 Flex 项目 <code>flex item</code> </p></h1>
        <h1 style="display: -webkit-inline-flex"><img style="width:50%;" src="/image/flex/one.jpg" alt="">

            <img style="width:50%;" src="/image/flex/two.png" alt=""></h1>
    </blockquote>

    <p>容器默认存在两根轴：水平的主轴<code>（main axis）</code>和垂直的交叉轴<code>（cross axis）</code>。</p>
    <p>主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；</p>
    <p>交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。</p>
    <p>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</p>
    <p><code>前六个是容器属性，后面是项目属性</code>。</p>
</section>
<section class="section-1">
    <h1>1. <code>flex-direction</code>属性</h1>
    <p><code>flex-direction</code>属性有四个值 <code>row | row-reverse | column | column-reverse</code>;</p>
    <p>row（默认值）：主轴为水平方向，起点在左端。如下图</p>
    <p>row-reverse：主轴为水平方向，起点在右端。</p>
    <p>因没有给容器设置宽度，所以默认上一级父亲的宽度</p>
    <blockquote>
        <div>
            <p>.section-one-1{</p>
            <p> display: flex;</p>
            <p>flex-direction:row;</p>
            <p>}</p>
        </div>
            <img  style="width: 61%;" src="/image/flex/1-1.png" alt="">
            <img style="width: 61%;" src="/image/flex/1-2.png" alt="">
    </blockquote>
    <div class="section-one-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p>column：主轴为垂直方向，起点在上。如下图</p>
    <p>column-reverse：主轴为垂直方向，起点在下。</p>
    <blockquote>
        <div>
            <p>.section-one-2{</p>
            <p> display: flex;</p>
            <p>flex-direction:column;</p>
            <p>}</p>
        </div>
        <img src="/image/flex/1-3.png" alt="">
        <img src="/image/flex/1-4.png" alt="">
    </blockquote>
    <div class="section-one-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
    </div>
</section>
<section class="section-1">
    <h1>2.<code>flex-wrap</code>属性</h1>
    <p>默认情况下，项目都排在一条线（又称"轴线"）上。<code>flex-wrap</code>属性定义，如果一条轴线排不下，如何换行。</p>
    <p><code>flex-wrap</code>属性有三个值 <code>nowrap | wrap | wrap-reverse</code>;</p>
    <p>为<code>nowrap</code>值时，不换行。不管项目宽度值为多少，最大值也被均分在一行内</p>
    <blockquote>
        <div>
            <p>.section-two-1{</p>
            <p> display: flex;</p>
            <p>flex-wrap:<code>nowrap</code>;</p>
            <p>}</p>
            <p>.section-two-1 span{</p>
            <p>width:400px;</p>
            <p> }</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/2-1.png" alt="">
    </blockquote>

    <div class="section-two-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p>为<code>wrap</code>值时，换行。第一行在最上面</p>
    <blockquote>
        <div>
            <p>.section-two-2{</p>
            <p> display: flex;</p>
            <p>flex-wrap:<code>wrap</code>;</p>
            <p>}</p>
            <p>.section-two-1 span{</p>
            <p>width:400px;</p>
            <p> }</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/2-2.png" alt="">
    </blockquote>

    <div class="section-two-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p>为<code>wrap-reverse</code>值时，换行。第一行在最下面</p>
    <blockquote>
        <div>
            <p>.section-two-3{</p>
            <p> display: flex;</p>
            <p>flex-wrap:<code>wrap-reverse</code>;</p>
            <p>}</p>
            <p>.section-two-1 span{</p>
            <p>width:400px;</p>
            <p> }</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/2-3.png" alt="">
    </blockquote>

    <div class="section-two-3">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
<h1>3. <code>flex-flow</code>属性</h1>
    <p><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code>。</p>
    <blockquote>
        <div>
            <p>.section-three-1{</p>
            <p> display: flex;</p>
            <p>flex-flow:<code>column wrap-reverse</code>;</p>
            <p> }</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/3.png" alt="">
    </blockquote>

    <div class="section-three-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
    </div>
</section>
<section class="section-1">
<h1>4. <code>justify-content</code>属性</h1>
    <p><code>justify-content</code>属性定义了项目在主轴上的对齐方式。</p>
    <p><code>justify-content</code>属性有四个值: <code>flex-start | flex-end | center | space-between | space-around</code>;</p>
    <p><code>flex-start</code>（默认值）：左对齐</p>
    <p><code>flex-end</code>右对齐</p>
    <p><code>center</code>： 居中</p>
    <p><code>space-between</code>：两端对齐，项目之间的间隔都相等。</p>
    <p><code>space-around</code>：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
    <p>具体对齐方式与轴的方向有关。默认一般从左至右，下图是<code> flex-direction: row-reverse;</code>从右至左</p>
    <blockquote>
        <div>
            <p>.section-four-1{</p>
            <p> display: flex;</p>
            <p>justify-content:<code>space-around</code>;</p>
            <p>    flex-direction: row-reverse;</p>
            <p> }</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/4.png" alt="">
    </blockquote>
    <div class="section-four-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
    </div>
</section>
<section class="section-1">
    <h1>5. <code>align-items</code>属性</h1>
    <p><code>align-items</code>属性定义项目在交叉轴对齐方式</p>
    <p><code>flex-start</code>交叉轴的起点对齐</p>
    <p><code>flex-end</code>交叉轴的终点对齐 </p>
    <p><code>center</code>交叉轴的中点对齐 </p>
    <p><code>baseline</code>项目的第一行文字的基线对齐 </p>
    <p><code>stretch</code>（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度</p>
    <blockquote>
    <div>
        <p>.section-five-1{</p>
        <p> display: flex;</p>
        <p>align-items:<code>stretch</code>;</p>
        <p> }</p>
        <p>.section-five-1 .one{</p>
        <p>height:200px;</p>
        <p>line-height:50px;</p>
        <p>}</p>
        <p>.section-five-1 .two{</p>
        <p>height:100px;</p>
        <p>line-height:50px;</p>
        <p>}.section-five-1 .three{</p>
        <p>height:50px;</p>
        <p>line-height:50px;</p>
        <p>}</p>
    </div>

    <img  style="width: 61%;" src="/image/flex/5-1.png" alt="">
</blockquote>
    <div class="section-five-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
    </div>
    <blockquote>
        <div>
            <p>.section-five-2{</p>
            <p> display: flex;</p>
            <p>align-items:<code>baseline</code>;</p>
            <p> }</p>
            <p>.section-five-2 .one{</p>
            <p>height:200px;</p>
            <p>line-height:50px;</p>
            <p>}</p>
            <p>.section-five-2 .two{</p>
            <p>height:100px;</p>
            <p>line-height:50px;</p>
            <p>}.section-five-2 .three{</p>
            <p>height:50px;</p>
            <p>line-height:50px;</p>
            <p>}</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/5-2.png" alt="">
    </blockquote>
    <div class="section-five-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
    </div>
</section>
<section class="section-1">
<h1>6. <code>align-content</code>属性</h1>
    <p><code>align-content</code>属性定义多根轴线的对齐方式。如果项目只有一根轴线，则属性不起作用</p>
    <p><code>flex-start</code>：与交叉轴的起点对齐。</p>
    <p><code>flex-end</code>：与交叉轴的终点对齐。</p>
    <p><code>center</code>：与交叉轴的中点对齐。</p>
    <p><code>space-between</code>：与交叉轴两端对齐，轴线之间的间隔平均分布。</p>
    <p><code>space-around</code>：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</p>
    <p><code>stretch</code>（默认值）：轴线占满整个交叉轴。</p>
</section>
<blockquote>
    <div>
        <p>.section-six-1{</p>
        <p> display: flex;</p>
        <p>align-content:<code>space-between</code>;</p>
        <p> height: 600px;</p>
        <p>border: 1px solid #000;</p>
        <p>flex-flow: wrap;</p>
        <p>}</p>
        <p>.section-six-1 span{</p>
        <p>width:300px;</p>
        <p>}</p>
    </div>

    <img  style="width: 61%;" src="/image/flex/6.png" alt="">
</blockquote>
<p>在运用 <code>align-content</code>时，要声明换行 <code>flex-flow:wrap</code></p>
<div class="section-six-1">
    <span class="one">1</span>
    <span class="two">2</span>
    <span class="three">3</span>
    <span class="four">4</span>
    <span class="five">5</span>
    <span class="six">6</span>
    <span class="seven">7</span>
    <span class="eight">8</span>
    <span class="nine">9</span>
</div>
<section class="section-1">
    <h1>7.<code>order</code>属性</h1>
  <p><code>order</code>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
    <blockquote>
        <div>
            <p>.section-seven-1{</p>
            <p> display: flex;</p>
            <p>}</p>
            <p>.section-seven-1>span:first-child{</p>
            <p>order:0</p>
            <p>}</p>
            <p>.section-seven-1>span:nth-child(5){</p>
            <p>order:1;</p>
            <p>}</p>
            <p>.section-seven-1>span:nth-child(4){</p>
            <p>order:2;</p>
            <p>}</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/7.png" alt="">
    </blockquote>
    <div class="section-seven-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <h1>8. <code>flex-grow</code>属性</h1>
    <p><code>flex-grow</code>属性定义项目的放大比例，默认为0。</p>
    <p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
    <blockquote>
        <div>
            <p>.section-eight-1{</p>
            <p> display: flex;</p>
            <p>}</p>
            <p>.section-eight-1>span:first-child{</p>
            <p>flex-grow:1</p>
            <p>}</p>
            <p>.section-eight-1>span:nth-child(2){</p>
            <p>flex-grow:1;</p>
            <p>}</p>
            <p>.section-eight-1>span:nth-child(4){</p>
            <p>flex-grow:2;</p>
            <p>}</p>
            <p>.section-eight-1>span:nth-child(5){</p>
            <p>flex-grow:1;</p>
            <p>}</p>
        </div>

        <img  style="width: 61%;" src="/image/flex/8.png" alt="">
    </blockquote>
    <div class="section-eight-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <h1>9. <code>flex-shrink</code>属性</h1>
    <p><code>flex-shrink</code>属性定义了项目的缩小比例，默认为1.即若空间不足，该项目将缩小</p>
    <p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
    <p>负值对该属性无效。</p>
    <blockquote>
        <p>.section-nine-1{display: flex;}</p>
        <p>.section-nine-1 span{width:300px;}</p>
        <p>.section-nine-1>span:first-child{flex-shrink:2;}</p>
        <p>.section-nine-1>span:nth-child(2){flex-shrink:3;}</p>
        <p>.section-nine-1>span:nth-child(4){flex-shrink:4;}</p>
        <p>.section-nine-1>span:nth-child(5){flex-shrink:2;}</p>
    </blockquote>
    <div class="section-nine-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
    </div>
    <blockquote>
        <p>实例解析：</p>
        <p>flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。</p>
        <p>本例中<b>显式定义</b>了</p>
        <p>.section-nine-1>span:first-child==>flex-shrink: 2;</p>
        <p>.section-nine-1>span:nth-child(2)==>flex-shrink:3</p>
        <p>.section-nine-1>span:nth-child(4)==>flex-shrink:4</p>
        <p>.section-nine-1>span:nth-child(5)==>flex-shrink:5</p>
        <p><b>隐式定义</b>.section-nine-1>span:nth-child(3)==>flex-shrink:1</p>
        <p>所以计算出来总共将剩余空间分成了 12 份，即2:3:1:4:2</p>
        <p>我们可以看到父容器继承宽度为 1200px，子项被定义为 300px，子项相加之后即为 1500 px，超出父容器 300px。</p>
        <p>那么超出的 300px 需要被 五个盒子消化通过收缩因子，所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。</p>
        <p>于是我们可以计算 五个盒子 将被移除的溢出量是多少：</p>
        <p>1 被移除溢出量：(300*2/3600)*300，即等于50px</p>
        <p>2 被移除溢出量：(300*3/3600)*300，即等于75px</p>
        <p>3 被移除溢出量：(300*1/3600)*300，即等于25px</p>
        <p>4 被移除溢出量：(300*4/3600)*300，即等于100px</p>
        <p>5 被移除溢出量：(300*2/3600)*300，即等于50px</p>
        <p>最后1、2、3、4、5的实际宽度分别为：300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px，此外，这个宽度是包含边框的。</p>
    </blockquote>
</section>
<section class="section-1">
    <h1>10.1 <code> flex-basis</code>属性</h1>
    <p><code> flex-basis</code>属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。</p>
    <p>浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
    <p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>
    <h1>10.2 <code>flex</code>属性</h1>
    <p><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为0 1 auto。后两个属性可选。</p>
    <p>该属性有两个快捷值：<code>auto (1 1 auto)</code> 和 <code>none (0 0 auto)</code>。</p>
    <p> 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
    <h1>10.3 <code>align-self</code>属性</h1>
    <p><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为auto，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于stretch。</p>
    <p>属性取值五个值：auto | flex-start | flex-end | center | baseline | stretch; 其作用和align-items 的作用一样。</p>
</section>
</body>
</html>

　　

原文地址：https://www.cnblogs.com/sqyambition/p/11617580.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot