Flex 弹性布局

编程爱好者联盟

2016-11-02

关注关注

多行自适应，多列自适应，间隔也能自适应，任意对齐

Flex 弹性布局

创建弹性容器 flex container

display: block | inline | inline-block | none | flex

弹性元素 flex item

是不是flex container 弹性容器中所有的子元素都是弹性元素呢？

不是的，只有弹性容器，在文档流中的直接子元素(不包含孙子元素 )才是弹性元素。

flex 布局特性

排列和方向

flex排列和方向的属性

描述

flex-direction弹性的方向flex-wrap弹性的换行flex-flow弹性的流order弹性的顺序

flex-direction

flex-direction取值

描述

row行row-reverse从右向左column从上到下column-reverse从下到上

row (flex-direction默认值)

Flex 弹性布局

row-reverse

Flex 弹性布局

column

Flex 弹性布局

column-reverse

Flex 弹性布局

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex direction</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;line-height: 40px;text-align: center;background-color: #c99702;}
    .container0 .item, .container1 .item{padding: 0 12px;}


    .container{display:flex;}
    .container1{flex-direction: row-reverse;}
    .container2{flex-direction: column;}
    .container3{flex-direction: column-reverse;}
    </style>
</head>
<body>
<div class="container container0">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container3">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
</body>
</html>

Flex 弹性布局

flex-wrap

flex-wrap取值

描述

nowrap不换行（默认值）wrap换行wrap-reverse

wrap

Flex 弹性布局

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex-direction</title>
    <style type="text/css">
    .container{width: 400px;margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex;}
    .container1{flex-wrap: wrap;}
    .container2{flex-wrap: wrap-reverse;}
    </style>
</head>
<body>

<div class="container container0">
        <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>

<div class="container container1">
        <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>

<div class="container container2">
        <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>

</body>
</html>

Flex 弹性布局