CSS中flex布局-蒲公英云

flex布局，也称为弹性盒子布局，这是一种简单而强大的布局方式，我们通过弹性盒指明控件的分布方式、内容的对齐方式和元素的排布顺序，把不同的组件放置在页面中，内容可以轻易的横向或者是纵向的进行排布。

基本属性

flex依赖父子元素，在元素上声明display:flex或者display：inline-flex便可以激活弹性和子布局，而这个元素称之为弹性容器，弹性容器下面的子元素就是弹性盒子布局元素。但是这两种方式还是有点区别的，display:flex;布局的方式创造一个块级盒子容器，而display:inline-flex;创建了一个行内块级元素容器，就像块级元素和行内块级元素的区别。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <script type="text/javascript" src="../jquery/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding: 0; 
        }
        #one{
            border: 1px solid red;
            display: flex;
            height: 200px;
        }
        #one div{
            margin-left:30px;
            background: blue 
        }
        #two{
            border: 1px solid green;
            display: inline-flex;
            height: 200px;
            margin-top: 50px
        }
        #two div{
            margin-left:30px;
            background: yellow; 
        }
    </style>
</head>
<body>
    <div id="one">
        <div>我们都是一家人</div>
        <div>我们都是一家人</div>
    </div>
    <div id="two">
        <div>我们都是一家人</div>
        <div>我们都是一个家庭</div>
    </div>
</body>
</html>

效果如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70

1、flex-direction属性

flex-direction:row(默认) | row-reverse | column | column-reverse

这几个属性分别代表容器内元素的排布方向:横向从左到右、横向从右到左、纵向从上到下、纵向从下到上；

示例如图：

flex-direction:row（默认）;（默认为水平从左到右方向排布）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1

flex-direction:row-reverse;（从右向左排布）

" class="reference-link">

flex-direction:column;（从上到下排布）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3

flex-direction:column-reverse;（从下到上排布）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4

2、换行flex-wrap属性和元素宽度是否根据父元素自行缩减

flex-wrap:nowrap(默认) | wrap | wrap-reverse;父元素

flex-shrink:0 | 1(默认缩减);子元素

换行这个属性在元素超出容器内部空间的时候就会有作用，默认显示在一行，不换行,如果容器内部元素超出容器空间大小就会被隐藏，这时候就应该设置换行属性。

flex-wrap:nowrap; flex-shrink:1;（子元素不换行，并且随着父元素自动缩减子元素内容宽度）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5

flex-wrap:nowrap; flex-shrink:0;（子元素不换行，但是不跟随父元素进行元素内容宽度缩减，这样就会导致子元素超出容器）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6

flex-wrap:wrap; flex-shrink:0;（子元素换行，但是不随父元素宽度进行内容缩减）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 7

flex-wrap:wrap-reverse; flex-shrink:0;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 8

3、flex-flow属性

flex-flow是flex-direction和flex-wrap的缩写属性

如：flex-flow:row wrap;flex-shrink:0;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 7

4、justify-content属性

justify-content属性指明在弹性容器的主轴上如何分布各行里面的弹性元素，说白点也就是进行元素排布位置。

justify-content:flex-start;（以横向排列为例，排列在主轴起边）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 9

justify-content:flex-end;（排列方向为主轴终边）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 10

justify-content:center;（排列为在主轴中点两侧排布）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 11

justify-content:space-between;（排布为每一行第一个元素放在起边，每行最后一个元素放在终边，然后把相邻的元素之间的空白调整平均，也就是始末靠边元素之间间隔分布）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 12

justify-content:space-around;（这样的分布是设置每个元素两边的空白部分平均，都相当于有两侧外边距且边距相同，但是相邻两个元素之间的距离随即扩大）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 13

justify-content:space-evenly;（这样分布是使得每个元素周围的空白空间都是一样的大小，等均分布）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 14

5、align-items属性

align-items属性是在垂轴的方向上进行弹性元素的排布

align-items:flex-start | flex-end | center | baseline | stretch(默认)

align-items:flex-start;（垂轴初始边对齐）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 15

align-items:flex-end;（垂轴终边对齐）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 16

align-items:center;（垂轴中心线对齐）

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 17

align-item: baseline;（中心线—基线对齐）

这个属性基线对齐是指的是当弹性元素内容不同的时候，会以弹性元素第一行内容的底部基线进行对齐，对齐的标准就是内容离弹性容器最远的为基准。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 18

6、align-content属性

align-content属性值得是垂轴方向上的空间和弹性元素的位置分配，一般适用于多行显示的弹性容器

align-content:stretch

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 19

align-content:flex-start;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 20

align-content:flex-end;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 21

align-content:center;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 22

align-content:space-between;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 23

align-content:space-around;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 24

align-content:space-enevly;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 25

以上都是对弹性容器的操作，下面这个属性是对弹性容器中弹性元素的操作

7、align-self属性

align-self属性是单独对容器中的弹性元素进行设置垂直轴对齐方式。也就是单独为弹性元素设置align-items属性

align-self:auto（默认值auto：弹性元素继承父元素的align-items属性）

当我们对第二个弹性元素进行设置该属性的时候，如下：默认继承父元素的align-items:stretch;属性

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 26

align-self:flex-start;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 27

align-self:flex-end;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 28

align-self:center;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 29

align-self:baseline;(元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐)

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 30

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 31

align-self:stretch;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 26

8、flex-grow属性

flex-grow:number | 0(默认值)

flex-grow属性定义有多余的空间时是否允许弹性元素增大，以及允许这部分大且有多余的空间是。相对其他同辈的弹性元素一什么比例增大。

举个例子说明：有一个宽度750px的弹性容器，里面有三个弹性元素，且都设置宽度100px；因此剩余的空间为450px，所以flex-grow属性就是决定如何分配这450px空间的。

正常情况下：默认每一个弹性元素的flex-grow:0;所以空白部分不会分配

1）设置弹性容器中第二个弹性元素flex-grow:1;其他的不设置，这时第二个div宽度=100px+450px*1=550px;

2)设置弹性容器中第一个和第二个元素的flex-grow值为1和2，此时第一个div的宽度=100px+450px*(1/3)=250px;第二个div的宽度=100px+450px*(2/3)=400px;这时弹性容器内剩余的空间就会按比例分配，多个的时候也是一样，根据设置的flex-grow的值得和进行比例分配。