flexbox弹性布局

2019-10-11 本文已影响0人手指乐

简介

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：

整体页面布局
完全支持旧浏览器的网站
旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者 display: table等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

属性

flex-direction
项目排列方向，默认横向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
    }
    /* 以下为辅助样式 */
    
    .flex-container {
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        padding: 20px;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
    </div>
</body>

</html>

flex-container添加：

flex-direction: column;

会显示为纵向排列
也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列
注意：
正常排序和反向排序是对项目在容器里的代码顺序，不是按里面值排序，比如上例中第一个项目的内容设置为2，第二个设置为1，反向后会变成1，2
容器宽默认充满父元素，高由里面的项目高决定
没有定义宽高的情况下，横向排列时，项目的宽默认由里面的内容决定，高充满容器
纵向排列时，宽充满容器，高由内容决定

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

.flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

效果：

row-reverse会让容器里的项目按内容反向排列，并且沿主轴右对齐，加上flex-end，又会使item左对齐

设置了justify-content后再还可以单独设置item的margin：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    /* 以下为辅助样式 */
    
    .flex-container {
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        padding: 20px;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item" style="margin-right: 20px;margin-left: 400px;">3</div>
    </div>
</body>

</html>

align-items
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;

stretch：如果项目未设置高度或设为auto，交叉轴对齐方式默认值为stretch，将占满整个容器的高度
flex-start：如果项目设置了高度，交叉轴对齐方式默认值为 flex-start

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center
    }
    
    .flex-container {
        height: 60px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>

</html>

可以在某个特定的 flex 项上使用 align-self CSS 属性，来使该特定的 flex 项与容器中的其他 flex 项进行对齐。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center
    }
    
    .flex-bottom {
        align-self: flex-end
    }
    
    .flex-container {
        height: 60px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item flex-bottom">3</div>
    </div>
</body>

</html>

flex-wrap
flex 项不允许多行/列排列，如果 flex 容器尺寸对于所有 flex 项来说不够大，那么flex 项将被调整大小以适应单行或列排列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另一行/列中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100px;
        height: 60px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>

    </div>
</body>

</html>

align-content
多行/列排列的 flex 项在交叉轴上的对齐方式
默认情况下，当 flex 容器的交叉轴（cross axis）上存在多余空间时，您可以在 flex 容器上设置 align-content，以控制 flex 项在交叉轴（cross axis）上的对齐方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默认）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-evenly;
    }
    
    .flex-container {
        width: 100px;
        height: 300px;
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        background-color: #B1FF84;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item ">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>

    </div>
</body>

</html>

flex-grow
任何情况下，item都会被container包裹，不会超过，如果container空间不够，item会自动压缩

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        width: 50px;
    }
    /* 以下为辅助样式 */
    
    .flex-container {
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        width: 50px;
        text-align: center;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
    </div>
</body>

</html>

上例中item的宽度会缩小到25px

flex-grow 只有在 flex 容器中有剩余空间时才会生效。flex 项的 flex-grow 属性指定该 flex 项相对于其他 flex 项将拉伸多少，以填充 flex 容器。默认值为1。当设置为 0 时，该 flex 项将不会被拉伸去填补剩余空间。在这个例子中，两个项的比例是 1:2，意思是在被拉伸时，第一个 flex 项将占用剩余空间的 1/3，而第二个 flex 项将占据剩余空间的2/3。(如果item不定义flex-grow，也不定义宽度，则item宽度由内容决定)

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        width: 180px;
        padding: 10px;
        background-color: #F0f0f0;
    }
    
    .flex-item1 {
        flex-grow: 0;
    }
    
    .flex-item2 {
        flex-grow: 1;
    }
    
    .flex-item3 {
        flex-grow: 2;
    }
    
    .flex-container .flex-item {
        padding: 20px 0;
        text-align: center;
        width: 30px;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>



<body>
    <div class="flex-container">
        <div class="flex-item flex-item1">1</div>
        <div class="flex-item flex-item2">2</div>
        <div class="flex-item flex-item3">3</div>
    </div>
    </div>
</body>



</html>

上例中，item的宽度即使不定义，item2和item3也会拉升，item1宽度由内容决定

flex-shrink:收缩：
flex-shrink 只有在 flex 容器空间不足时才会生效。它指定 flex 项相对于其他 flex 项将缩小多少，以使 flex 项不会溢出 flex 容器。默认值为 1。当设置为0时，该 flex 项将不会被收缩。在这个例子中，比例是1：2，意思是在收缩时，第一项将收缩 1/3 ，而第二个项目将被收缩 2/3 。注： flex-shrink 和 flex-grow 正好相反
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}

案例

响应式菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /*Flexbox是一个相当优秀的属性，它可能会成为未来版面布局的一部分。
    如果考虑到只处理移动方面的，那么兼容性就可以忽略了。
    -moz代表firefox浏览器私有属性
    -ms代表IE浏览器私有属性
    -webkit代表chrome、safari私有属性*/
    
    .navigation {
        list-style: none;
        margin: 0;
        background: deepskyblue;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /*多栏多列布局*/
        -webkit-flex-flow: row wrap;
        /*让灵活的项目在必要的时候进行拆行*/
        justify-content: flex-end;
    }
    
    .navigation a {
        text-decoration: none;
        display: block;
        padding: 1em;
        color: white
    }
    
    .navigation a:hover {
        background: #00AEE8
    }
    
    @media all and (max-width:800px) {
        .navigation {
            justify-content: space-around
        }
    }
    
    @media all and (max-width:600px) {
        .navigation {
            -webkit-flex-flow: column wrap;
            padding: 0
        }
    }
    /*宽度小于600的时候自动换行：*/
    
    .navigation a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1)
    }
    
    .navigation li:last-of-type a {
        background: #00AEE8;
        border-bottom: 0;
    }
    /*指定父元素的最后一个 li 元素的背景色： li:nth-child(3) li的第3个元素   li:first-child 父元素的第一个子元素li里的内容*/
</style>

<body>
    <ul class="navigation">
        <li><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
        <li><a href="#">公司介绍</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

</html>

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
默认情况下，每个flex项目的宽高由内容决定
通过媒体查询，浏览器宽度小于800时，让项目在主轴均匀分隔，小于600时，变为纵向排列

flexbox弹性布局

简介

基本概念

属性

案例

猜你喜欢

热点阅读