Flex布局

头像
啊哈hl
    阅读 18 分钟
    2

    Flex布局

    1.什么是Flex布局

    Flex是Flexible Box的缩写,意为弹性布局,任何容器都可以设为弹性布局.

    .box{
    display:flex;
    display:inline-flex;   //行内元素
    display:-webkit-flex;  //Webkit内核的浏览器
}

    设为Flex布局以后,子元素的float、clear和vertical-align属性将失效.

    2.容器属性

    flex-direction

    指定了内部元素是如何在flex容器中布局的,定义了主轴的方向(正方向或反方向).
    语法格式:flex-direction:row | row-reverse | column | column-reverse

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content {
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-direction: row;
            display: flex;
            flex-direction: row;
        }

        .box {
            width: 50px;
            height: 50px;
        }

        #content1 {
            width: 200px;
            height: 200px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-direction: column;
            display: flex;
            flex-direction:column;
        }

    </style>
</head>
<body>
<h4>This is a Column-Reverse</h4>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
</body>
</html>

    flex-wrap

    指定flex元素单行还是多行显示.如果允许换行,该属性允许你控制行的堆叠方向.
    语法格式:flex-wrap: nowrap | wrap | wrap-reverse

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1,#c2,#c3{
            color: #fff;
            font: 100 24px/100px sans-serif;
            height: 150px;
            text-align: center;
        }

        div{
            height: 50%;
            width: 50%;
        }
        .red {
            background: orangered;
        }
        .green {
            background: yellowgreen;
        }
        .blue {
            background: steelblue;
        }

        /* Flexbox Styles */
        #c1 {
            display: flex;
            /*不换行*/
            flex-wrap: nowrap;

        }
        #c2 {
            display: flex;
            flex-direction: row-reverse;
            /*flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。*/
            flex-wrap: wrap;
        }
        #c3{
            display: flex;
            /*和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。*/
            flex-wrap: wrap-reverse;
        }
    </style>
</head>
<body>
<h4>This is an example for flex-wrap:nowrap </h4>
<div id="c1">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap </h4>
<div id="c2">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div id="c3">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
</body>
</html>

    flex-flow

    是flex-direction和flex-wrap的简写.
    语法格式: flex-flow: <flex-direction> || <flex-wrap>,例如:flex-flow: column-reverse wrap;

    justify-content

    定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间.
    语法格式:justify-content: flex-start | flex-end | center | space-between | space-around;
    flex-start 从行首开始排列.每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐.
    flex-end 从行尾开始排列.每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐.
    center 伸缩元素向每行中点排列.每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同.
    space-between 在每行上均匀分配弹性元素.相邻元素间距离相同.每行第一个元素与行首对齐,每行最后一个元素与行尾对齐.
    space-around 在每行上均匀分配弹性元素.相邻元素间距离相同.每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #c1,#c2,#c3{
            color: #fff;
            font: 100 24px/100px sans-serif;
            height: 150px;
            text-align: center;
            border: solid 1px blue;
        }

        div{
            height: 50%;
            width: 20%;
        }
        .red {
            background: orangered;
        }
        .green {
            background: yellowgreen;
        }
        .blue {
            background: steelblue;
        }

        /* Flexbox Styles */
        #c1 {
            display: flex;
            flex-flow:row nowrap;
            justify-content:space-between;
        }
        #c2 {
            display: flex;
            flex-flow:column-reverse nowrap;
            justify-content:flex-start;
        }
        #c3 {
            display: flex;
            flex-flow:row-reverse nowrap;
            justify-content:space-around;
        }
    </style>
</head>
<body>
<h4>This is an example for justify-content:space-between</h4>
<div id="c1">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
<h4>This is an example for justify-content:flex-start </h4>
<div id="c2">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
<h4>This is an example for justify-content:space-around </h4>
<div id="c3">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
</body>
</html>

    align-items

    以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐.
    语法格式：align-items:flex-start | flex-end | center | baseline | stretch
    flex-start 元素向侧轴起点对齐.
    flex-end 元素向侧轴终点对齐.
    center 侧轴中点对其.
    baseline 项目的第一行文字的基线对齐.
    stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            display: flex;
            height:200px;
            width: 240px;
            flex-wrap: wrap;
            align-items: flex-end; /* Can be changed in the live sample */
            background-color: #8c8c8c;
        }
        div > div {
            border: 2px solid #8c8c8c;
            width: 50px;
        }
        .item:nth-child(odd){
            background-color: #8cffa0;
            min-height: 30px;
        }
        .item:nth-child(even){
            background-color: #ff8cff;
            min-height: 60px;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
<select id="itemsAlignment">
    <option value="flex-start">flex-start</option>
    <option value="flex-end" selected>flex-end</option>
    <option value="center">center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>
</select>
</body>
</html>
<script>
    var itemsAlignment = document.getElementById("itemsAlignment");
    itemsAlignment.addEventListener("change", function (evt) {
        document.getElementById("container").style.alignItems = evt.target.value;
    });
</script>

    align-content

    定义了当作为一个弹性盒子容器的属性时,浏览器如何在容器的侧轴围绕弹性盒子项目分配空间.
    语法格式:align-content: flex-start | flex-end | center | space-between | space-around | stretch

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            display: flex;
            height:200px;
            width: 240px;
            flex-wrap: wrap;
            background-color: #8c8c8c;
           
            align-content: flex-end; /* Can be changed in the live sample */
        }

        div > div {
            border: 2px solid #8c8c8c;
            width: 50px;
            height: 50px;
            background-color: #a0c8ff;
        }
    </style>
</head>
<body>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<select id="contentAlignment">
    <option value="flex-start">flex-start</option>
    <option value="flex-end" selected>flex-end</option>
    <option value="center">center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="stretch">stretch</option>
</select>
</body>
</html>
<script>
    var itemsAlignment = document.getElementById("contentAlignment");
    itemsAlignment.addEventListener("change", function (evt) {
        document.getElementById("container").style.alignContent   = evt.target.value;
    });
</script>

    align-items与items-content的区别

    `align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式.让每一个单行的容器居中而不是让整个容器居中.
    align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐.`
    对于Flex容器里面单行的情况,align-content是不起作用的.
    图片描述图片描述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width:800px;
            height:200px;
            display: flex;
            border:1px solid #000000;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            /*align-content: center;*/
        }
        #One,#Two{
            width:200px;
            height:30px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="One">1</div>
    <div id="Two">2</div>
</div>
</body>
</html>

    对于多行的,也就是多个cross axis的情况.
    图片描述图片描述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width:300px;
            height:200px;
            display: flex;
            border:1px solid #000000;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            /*align-content: center;*/
        }
        #One,#Two{
            width:200px;
            height:30px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="One">1</div>
    <div id="Two">2</div>
</div>
</body>
</html>

    3.项目属性

    order

    元素按照order属性的值的增序进行布局.拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            display: flex;
            height:200px;
            width: 240px;
            flex-wrap: wrap;
            align-items: flex-end; /* Can be changed in the live sample */
            background-color: #8c8c8c;
        }
        div > div {
            border: 2px solid #8c8c8c;
            width: 50px;
        }
        .item:nth-child(odd){
            background-color: #8cffa0;
            min-height: 30px;
        }
        .item:nth-child(even){
            background-color: #ff8cff;
            min-height: 60px;
        }
        #item1{
            order:1;
        }
        #item2{
            order:3;
        }
        #item3{
            order:2;
        }
        #item4{
            order:1;
        }
        #item5{
            order:1;
        }
        #item6{
            order:0;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="item1" class="item">1</div>
    <div id="item2" class="item">2</div>
    <div id="item3" class="item">3</div>
    <div id="item4" class="item">4</div>
    <div id="item5" class="item">5</div>
    <div id="item6" class="item">6</div>
</div>
</body>
</html>

    flex-grow

    定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content {
            display: flex;
        }
        .box {
            flex-grow: 1;
            border: 3px solid rgba(0,0,0,.2);
        }
        .box1 {
            flex-grow: 2;
            border: 3px solid rgba(0,0,0,.2);
        }
    </style>
</head>
<body>
<h4>This is a Flex-Grow</h4>
<h5>A,C are flex-grow:1 . B is flex-grow:2 .</h5>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box1" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
</body>
</html>

    flex-shrink

    指定了 flex 元素的收缩规则.flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值.
    如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content {
            display: flex;
            width: 400px;
            border: solid 1px blue;
        }
        #content div {
            border: 3px solid rgba(0,0,0,.2);
        }
        .box {
            width: 500px;
            flex-shrink: 1;
        }
        .box1 {
            width: 500px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
<p>the width of content is 500px,  flex item is 500px.</p>
<p>A, C are flex-shrink:1. B is flex-shrink:2</p>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box1" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
</body>
</html>

    flex-basis

    指定了 flex 元素在主轴方向上的初始大小.如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            border: solid 1px green;
            width: 400px;
        }
        #d1{
            width: 300px;
            flex-basis: 200px;
            border: solid 1px red;
            height: 200px;
        }
        #d2{
            width: 100px;
            height: 300px;
            border: solid 1px blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="d1"></div>
    <div id="d2"></div>
</div>
</body>
</html>

    flex

    规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间,flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选.
    语法格式: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    其中auto (1 1 auto) 和 none (0 0 auto).

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flex-container{
            background-color: #F4F7F8;
            resize: horizontal;
            overflow: hidden;
            display: flex;
            margin: 1em;
        }
        .auto{
            flex:auto;
        }
        .item{
            margin: 1em;
            padding: 0.5em;
            width: 110px;
            min-width: 0;
            background-color: #1B5385;
            color: white;
            font-family: monospace;
            font-size: 13px;
        }
        .initial {
            flex: initial;
        }
        .none {
            flex: none;
        }
        #flex-container {
            display: flex;
            flex-direction: row;
        }
        #flex-container > .flex-item {
            flex: auto;
        }
        #flex-container > .raw-item {
            width: 5rem;
        }
        #flex-container {
            width: 100%;
            font-family: Consolas, Arial, sans-serif;
        }
        #flex-container > div {
            border: 1px solid #f00;
            padding: 1rem;
        }
        #flex-container > .raw-item {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item auto">auto</div>
    <div class="item auto">auto</div>
    <div class="item auto">auto</div>
</div>
<div class="flex-container">
    <div class="item auto">auto</div>
    <div class="item initial">initial</div>
    <div class="item initial">initial</div>
</div>
<div class="flex-container">
    <div class="item auto">auto</div>
    <div class="item auto">auto</div>
    <div class="item none">none</div>
</div>

<div class="flex-container">
    <div class="item initial">initial</div>
    <div class="item none">none</div>
    <div class="item none">none</div>
</div>
<div class="flex-container">
    <div class="item four">4</div>
    <div class="item two">2</div>
    <div class="item one">1</div>
</div>
<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
    <div class="raw-item" id="raw" style="display: block;">Raw box</div>
</div>
<script type="text/javascript">
    var flex = document.getElementById("flex");
    var raw = document.getElementById("raw");
    flex.addEventListener("click", function() {
        raw.style.display = raw.style.display == "none" ? "block" : "none";
    });
</script>
</body>
</html>

    auto 元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器.这相当于将属性设置为 "flex: 1 1 auto".
    initial 属性默认值,元素会根据自身宽高设置尺寸.它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器.相当于将属性设置为"flex: 0 1 auto".
    none 元素会根据自身宽高来设置尺寸.它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器,相当于将属性设置为"flex: 0 0 auto".
    <positive-number> 元素会被赋予一个容器中自由空间的指定占比。这相当于设置属性为"flex: <positive-number> 1 0".

    align-self

    定义flex子项单独在侧轴（纵轴）方向上的对齐方式.align-self 属性可重写灵活容器的 align-items 属性
    语法格式:align-self: auto|stretch|center|flex-start|flex-end|baseline

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>align-self</title>
<style>
    #main {
        width: 220px;
        height: 300px;
        border: 1px solid black;
        display: flex;
        align-items: flex-start;
    }
    #main div {
        -webkit-flex: 1; /* Safari 6.1+ */
        flex: 1;
    }
    #myBlueDiv {
        -webkit-align-self: center; /* Safari 7.0+ */
        align-self: center;
    }
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
</html>

    参考:
    https://css-tricks.com/snippe...

    htmlcss
    啊哈hl
    141 声望1 粉丝

    be a better man

    « 上一篇
    JS中的深拷贝与浅拷贝
    下一篇 »
    使用webpack搭建react开发环境

    引用和评论

    推荐阅读
    头像
    SVG介绍

    啊哈hl赞 1阅读 2.3k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.7k评论 2

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.8k

    0 条评论
    得票最新