Flex 弹性布局

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

image

 

 

创建弹性容器  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默认值)

image

 

 

row-reverse

image

 

column

image

 

column-reverse

image

 

举个栗子：

<!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>

image

 

 

flex-wrap

flex-wrap取值 描述
nowrap 不换行（默认值）
wrap 换行
wrap-reverse  

 

wrap

image

 

举个栗子：

<!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>

image

 

flex-flow(推荐使用)

语法:

flex-flow：<' flex-direction '> || <' flex-wrap '>

默认值：看各分拆属性
适用于：flex容器
继承性：无
动画性：否
计算值：指定值

 

取值：

<' flex-direction '>：定义弹性盒子元素的排列方向。
<' flex-wrap '>：控制flex容器是单行或者多行。

 

说明:

复合属性。设置或检索弹性盒模型对象的子元素排列方式。

 

推荐使用 flex-flow ,而不是单独用flex-direction  或 flew-wrap

image初始值   row   nowrap

 

 

imageimage

 

 

order

order 是一个『相对值』 ，是排在主轴上的顺序

order 值越大，排名越靠后。

order取值 描述
order 整数
initial 初始值  0

image

 

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>order</title>
    <style type="text/css">
    .container{
        display: flex;
        background-color: #963297;
        width: 300px;
        padding:3px;
    }

    .item{
        color: #fff;
        width: 50px;
        line-height: 30px;
        background-color: #d29201;
        margin: 4px;
        text-align: center;
    }
    .item1{order: 10;}
    .item2{order: 2;}
    .item3{order: 3;}

    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>
</body>
</html>

image

 

 

弹性

flex弹性相关的属性

  • flex-grow
  • flex-shrink
  • flex-basis

 

flex-basis

设置『flex item』的 『初始宽度、 高度』

横向排列时，设置的是宽

纵向排列时，设置的是高

 

语法：

flex-basis：<length> | <percentage> | auto | content

默认值：auto

适用于：flex子项

继承性：无

动画性：是，当值为非关键字时

计算值：指定值

 

取值：

<length>： 用长度值来定义宽度。不允许负值<percentage>：用百分比来定义宽度。不允许负值auto： 无特定宽度值，取决于其它属性值content： 基于内容自动计算宽度

说明：

设置或检索弹性盒伸缩基准值。

  • 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
  • 对应的脚本特性为flexBasis。

 

flex-grow

设置元素所能分配到的空余空间的比例。

语法:

flex-grow：<number>

默认值：0

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

 

取值：

<number>：用数值来定义扩展比率。不允许负值

 

说明：

  • 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

flex-basis + flow-grow / sum(flow-grow) * remain

 

flex-shrink

把负的剩余空间平摊

语法:

flex-shrink：<number>
默认值：1
适用于：flex子项
继承性：无
动画性：是
计算值：指定值

 

取值:

<number>：用数值来定义收缩比率。不允许负值

 

说明:

设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

flex-basis + flow-shrink / sum(flow-shrink) * remain

 

flex(推荐使用)

语法

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默认值：看各分拆属性
适用于：flex子项
继承性：无
动画性：否
计算值：看各分拆属性

 

取值

none：none关键字的计算值为: 0 0 auto
<' flex-grow '>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<' flex-shrink '>：用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<' flex-basis '>：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

说明

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex</title>
    <style type="text/css">
    .container{
        background-color: #963297;
    }

    .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;font-size: 50px;}
    .container{display: flex;flex-flow: column;}/* 弹性布局，且纵向排列 */
    html,body,.container{height: 100%;}
    .item{flex: 1 1 0;}/* flex-grow:1;  flex-shrink:1; flex-basis:0; */
    .item3{flex: 2;}/* flex-grow:2; */
    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>
</body>
</html>

image

 

 

对齐

和『对齐』相关的属性有:

 

  • justify-content
  • align-items
  • align-self
  • align-content

 

 

 

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around

默认值：flex-start

设置 main-axis 方向上对齐方式

justify-content 和 text-align是类似的，比text-align 更丰富一些。

 

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>justify-content</title>
    <style type="text/css">
    .container{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; }
    .fs{justify-content: flex-start;}
    .fe{justify-content: flex-end;}
    .c{justify-content: center;}
    .sb{justify-content: space-between;}
    .sa{justify-content: space-around;}


    /*.container{flex-flow: column; width: 120px;height: 300px;}*/
    </style>
</head>
<body>

<div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container fe">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container c">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container sb">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container sa">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

</body>
</html>

image

 

 

 

 

align-items

设置『辅轴方向上』的对齐方式

语法:

align-items：flex-start | flex-end | center | baseline | stretch
默认值：stretch
适用于：flex容器
继承性：无
动画性：是
计算值：指定值

 

取值:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

 

说明:

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
对应的脚本特性为alignItems。

 

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-items</title>
    <style type="text/css">
    .container{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;}
    .item1{line-height: 100px;}
    .item2{line-height: 70px;}
    .fs{align-items: flex-start;}
    .fe{align-items: flex-end;}
    .c{align-items: center;}
    .s{align-items: stretch;}
    .b{align-items: baseline;}

    </style>
</head>
<body>
    <div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container fe">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container c">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container s">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container b">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    
</body>
</html>

image

 

我看不懂，最后的 baseline。 觉得应该和 flex-start相同。而实际和center相同。 求解释

 

 

 

align-self

align-self：auto | flex-start | flex-end | center | baseline | stretch

设置『单个 flex item 』在cross-axis 方向上的对齐方式

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-self</title>
    <style type="text/css">
    .container{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;align-items: flex-start;}
    .item1{line-height: 100px;}
    /*.item2{align-self: flex-end;}*/
    /*.item2{align-self: center;}*/
    /*.item2{align-self: baseline;}*/
    /*.item2{align-self: stretch;}*/
    </style>
</head>
<body>
        <div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
        </div>
</body>
</html>

image

 

 

 

flex-start

imageflex-end

imagecenter

imagebaseline

imagestretch

 

 

 

align-content

align-content：flex-start | flex-end | center | space-between | space-around | stretch

设置 cross-axis 辅轴方向上行对齐方式

flex换行了，多行之间的对齐方式

默认值： stretch 拉伸

 

举个栗子：

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

    .container{display: flex;}
    .container{height: 800px;flex-flow: row wrap; align-items: flex-start;}

    /*.container{align-content: flex-start;}*/
    /*.container{align-content: flex-end;}*/
    /*.container{align-content: center;}*/
    /*.container{align-content: space-between;}*/
    /*.container{align-content: stretch;}*/

    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
</div>
</body>
</html>

image

 

 

 

布局--三行两列自适应布局

核心代码

<div class="head">head</div>
<div class="body">
        <div class="side">side</div>
        <div class="main">main</div>
</div>
<div class="foot">foot</div>

 

body{display: flex;flex-flow: column;}
.head,.foot{height: 100px;}
.body{flex-flow: 1; display: flex;}
.side{width: 200px;}
.main{flex: 1;}

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三行两列自适应布局</title>
    <style type="text/css">
    html,body{margin: 0;text-align: center;}
    .head, .foot{line-height: 100px;background-color: #000;color: #fff;}
    .side{background-color: yellow;}
    .main{background-color: pink;}


    html,body{height: 100%;}
    body{display: flex;flex-flow: column;}
    .head,.foot{height: 100px;}
    .body{flex: 1;display: flex;}
    .side{width: 200px;}
    .main{flex: 1;}

    .main{margin-left: 10px;}
    /*.body{width: 960px;align-self: center;}*/
    </style>
</head>
<body>
<div class="head">head</div>
<div class="body">    
        <div class="side">side</div>
        <div class="main">main</div>
</div>
<div class="foot">foot</div>
</body>
</html>

 

image

 

 

 

一个别人写的开源项目  flex-layout-attribute 

 

posted @ 2016-11-02 14:52  刘江龙  阅读(502)  评论(0)  编辑  收藏  举报