手记

Flex语法——弹性布局

DIEA
2018-09-02 14:15:57浏览 2670

0. 前言

传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！


网上的图片.jpg

1. 基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

2. 标签属性

容器的属性

  1. flex-direction: row | row-reverse | column | column-reverse;
    /主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上 /

  2. flex-wrap: nowrap | wrap | wrap-reverse;
    /换行：不换行（默认） | 换行 | 换行并第一行在下方 /

  3. flex-flow: <flex-direction> || <flex-wrap>;
    /主轴方向和换行简写 /

  4. justify-content: flex-start | flex-end | center | space-between | space-around;
    /主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 /

  5. align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） */

  6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）/

项目的属性

  1. order: <integer>;
    /排序：数值越小，越排前，默认为0/

  2. flex-grow: <number>; /* default 0 /
    /    放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）*/

  3. flex-shrink: <number>; /* default 1 /
    /    缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
    负值对该属性无效。）*/

  4. flex-basis: <length> | auto; /* default auto /
    /    固定大小：默认为0，可以设置px值，也可以设置百分比大小*/

  5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，/

  6. align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满 */

3. 代码实现

3.1 容器的属性

一、flex-direction
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                padding: 0;                margin: 0;
            }            ul,li{                list-style: none;
            }            ul{                width: 500px;                height: 300px;                border: 2px solid black;                display: flex;
            }            li{                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background-color: red;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body></html>
flex-direction: row
ul:nth-of-type(1){                /* *主轴方向：左到右（默认） */
                flex-direction: row;
            }

图片.png

flex-direction: row-reverse
ul:nth-of-type(2){                /*主轴方向：右到左*/
                 flex-direction: row-reverse;
            }

图片.png

flex-direction: column
ul:nth-of-type(3){                /*主轴方向：上到下*/
                 flex-direction: column;
            }

图片.png

flex-direction: column-reverse
ul:nth-of-type(4){                /*主轴方向：下到上*/
                 flex-direction: column-reverse;
            }

图片.png

二、flex-wrap
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                padding: 0;                margin: 0;
            }            ul,li{                list-style: none;
            }            ul{                width: 500px;                height: 300px;                border: 2px solid black;                display: flex;
            }            li{                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background-color: red;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </body></html>
flex-wrap: nowrap
ul:nth-of-type(1){                /*换行：不换行（默认）*/
                flex-wrap: nowrap;
            }

图片.png

flex-wrap: wrap
ul:nth-of-type(2){                /* 换行 */
                flex-wrap: wrap;
            }

图片.png

flex-wrap: wrap-reverse
ul:nth-of-type(3){                /* 换行 并第一行在下方*/
                flex-wrap: wrap-reverse;
            }

图片.png

三、flex-shrink
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                padding: 0;                margin: 0;
            }            ul,li{                list-style: none;
            }            ul{                width: 500px;                height: 300px;                border: 2px solid black;                display: flex;
            }            li{                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background-color: red;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body></html>
justify-content: flex-start
ul:nth-of-type(1){                /* *主轴方向：左对齐（默认） */
                justify-content: flex-start;
            }

图片.png

justify-content: flex-end
ul:nth-of-type(2){                /* *主轴方向：右对齐 */
                justify-content: flex-end;
            }

图片.png

justify-content: center
ul:nth-of-type(3){                /* *主轴方向：居中对齐 */
                justify-content: center;
            }

图片.png

justify-content: space-between
ul:nth-of-type(4){                /* *主轴方向：两端对齐 */
                justify-content: space-between;
            }

图片.png

justify-content: space-around
ul:nth-of-type(5){                /* *主轴方向：平均分布 */
                justify-content: space-around;
            }

图片.png

四、align-items
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                padding: 0;                margin: 0;
            }            ul,li{                list-style: none;
            }            ul{                width: 500px;                height: 300px;                border: 2px solid black;                display: flex;
            }            li{                width: 80px;                /*height: 50px;*/
                border: 2px solid black;                color: white;                background-color: red;                font-size: 30px;
            }            </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li >2</li>
            <li>3</li>
            <li >4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body></html>
align-items: flex-start
ul:nth-of-type(1){                /* 交叉轴对齐方式：顶部对齐 */
                align-items: flex-start;
            }

图片.png

align-items: flex-end
ul:nth-of-type(2){                /* 底部对齐 */
                align-items: flex-end;
            }

图片.png

align-items: center
ul:nth-of-type(3){                /*居中对齐 */
                align-items: center;
            }

图片.png

align-items: baseline
ul:nth-of-type(4){                /* 文本基线对齐 */
                align-items: baseline;
            }

图片.png

align-items: stretch
ul:nth-of-type(5){                /*如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） */
                align-items: stretch;
            }

图片.png

五、align-content
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{                padding: 0;                margin: 0;
            }            ul,li{                list-style: none;
            }            ul{                width: 500px;                height: 300px;                border: 2px solid black;                display: flex;
            }            li{                width: 80px;                /*height: 50px;*/
                border: 2px solid black;                color: white;                background-color: red;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body></html>
align-content: flex-start
ul:nth-of-type(1){                flex-wrap: wrap;                /*多主轴对齐： 顶部对齐*/
                align-content: flex-start;
            }

图片.png

align-content: flex-end
ul:nth-of-type(2){                flex-wrap: wrap;                /*底部对齐*/
                align-content: flex-end;
            }

图片.png

align-content: center
ul:nth-of-type(3){                flex-wrap: wrap;                /*居中对齐*/
                align-content: center;
            }

图片.png

align-content: space-between
ul:nth-of-type(4){                flex-wrap: wrap;                /*上下对齐并铺满*/
                align-content: space-between;
            }

图片.png

align-content: space-around
ul:nth-of-type(5){                flex-wrap: wrap;                /*均匀分布 上下间距相同*/
                align-content: space-around;
            }

图片.png

align-content: stretch
ul:nth-of-type(6){                flex-wrap: wrap;                /*轴线占满整个交叉轴     （默认）*/
                align-content: stretch;
            }

图片.png

3.2 项目的属性

一、order
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>01_order</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;
            }            ul,li{                list-style: noen;
            }            ul{                width:500px;                height: 300px;                border: 2px solid black;                display: flex;
                
            }            li{                list-style: none;                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background: orangered;                font-size: 30px;
            }           
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body></html>
ul li:nth-of-type(2){                /*order: integer(最大值);  
                 * 排序：数值越小，越排前，默认为0*/
                order:2 ;
            }ul li:nth-of-type(5){                order: 4;
            }

图片.png

二、flex-grow
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>02_flex-grow</title>
        <style>
            *{                margin: 0;                padding: 0;
            }            ul,li{                list-style: noen;
            }            ul{                width:800px;                height: 300px;                border: 2px solid black;                display: flex;
                
            }            li{                list-style: none;                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background: orangered;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body></html>
ul li:nth-of-type(1){                /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）*/
                flex-grow: 1;
            }            ul li:nth-of-type(3){                flex-grow:2 ;
            }

图片.png

三、flex-shrink
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>03_flex-shrink</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;
            }            ul,li{                list-style: noen;
            }            ul{                width:500px;                height: 300px;                border: 2px solid black;                display: flex;
                
            }            li{                list-style: none;                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background: orangered;                /*font-size: 30px;*/
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body></html>
ul li:nth-of-type(1){             /*缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
              * 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
              负值对该属性无效。）*/
                flex-shrink: 0;   
            }            
            ul li:nth-of-type(3){                flex-shrink:3 ;
            }            
            ul li:nth-of-type(5){                flex-shrink: 5;
            }

图片.png

四、flex-basis
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>04_flex-basis</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;
            }            ul,li{                list-style: noen;
            }            ul{                width:800px;                height: 300px;                border: 2px solid black;                display: flex;
                
            }            li{                list-style: none;                width: 80px;                height: 50px;                border: 2px solid black;                color: white;                background: orangered;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body></html>
ul li:nth-of-type(1){                /*flex-basis: <length> | auto;*/ /* default auto */
             /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
                flex-basis:300px;
            }            
            ul li:nth-of-type(3){                flex-basis: 20%;
            }            
            ul li:nth-of-type(5){                flex-basis: auto;
            }

图片.png

五、align-self
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>05_align-self</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;
            }            ul,li{                list-style: noen;
            }            ul{                width:500px;                height: 300px;                border: 2px solid black;                display: flex;
                
            }            li{                list-style: none;                width: 80px;                /*height: 50px;*/
                border: 2px solid black;                color: white;                background: skyblue;                font-size: 30px;
            }        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body></html>
ul li:nth-of-type(1){                /*单独对齐方式：  自动（默认）*/
                align-self: auto;
            }            
            ul li:nth-of-type(2){                
                /*顶部对齐*/
                align-self: flex-start;
            }            
            ul li:nth-of-type(3){                /*底部对齐*/
                align-self: flex-end;
            }             
            ul li:nth-of-type(4){                /*居中对齐*/
                align-self: center;
            }            
            ul li:nth-of-type(5){                height:100px;                /*文本基线对齐*/
                align-self: baseline;
            }            
            ul li:nth-of-type(6){            /*  flex-flow: wrap;*/
                /*上下对齐并铺满*/
                align-self: stretch;
            }            ul li:nth-of-type(7){                height: 30px;                line-height: 50px;                align-self: baseline;
            }

图片.png

4. 结束语

这写的很乱，我看着都乱凑合看吧！！！



作者：旧丶时候
链接：https://www.jianshu.com/p/20d226c57f25


相关标签
Html/CSS
0人推荐
随时随地看视频
慕课网APP

相关阅读

纯table标签的html打印注意事项
基于HTML5之APP微信支付集成实现（转载）
HTML与CSS之实体字符和画表格
React 简单介绍
Flex语法——弹性布局