flexbox弹性布局

简介

  • 布局的传统解决方案，基于盒状模型，依赖 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 布局：
  1. 整体页面布局
  2. 完全支持旧浏览器的网站
    旧版浏览器，如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还可以设置为以下值：
flex-start | flex-end | center | space-between | space-around | space-evenly;
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。

设置了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>

  1. flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

  2. 默认情况下，每个flex项目的宽高由内容决定

  3. 通过媒体查询，浏览器宽度小于800时，让项目在主轴均匀分隔，小于600时，变为纵向排列

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