Flex语法——弹性布局

css3

浏览数:820

2019-3-9

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.交叉轴对齐方式:顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto,将占满整个容器的高度。(默认)
align-items: flex-start | flex-end | center | baseline | stretch
6.多主轴对齐:顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。(默认)
align-content: flex-start | flex-end | center | space-between | space-around | stretch

项目的属性

1. 排序:数值越小,越排前,默认为0
order: <integer>
2.放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小(约等),以此类推)
flex-grow: <number>; /* default 0 */
3.缩小:如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。)

flex-shrink: <number>; /* default 1 */
4.固定大小:默认为0,可以设置px值,也可以设置百分比大小
flex-basis: <length> | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
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 style="line-height: 80px;">2</li>
            <li>3</li>
            <li style="line-height: 80px;">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. 结束语

这写的很乱,我看着都乱凑合看吧!!!