首页手记 Flex语法——弹性布局

Flex语法——弹性布局

标签：

Html/CSS

0. 前言

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

网上的图片.jpg

1. 基本概念

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

2. 标签属性

容器的属性

flex-direction: row | row-reverse | column | column-reverse;
/主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上 /
flex-wrap: nowrap | wrap | wrap-reverse;
/换行：不换行（默认） | 换行 | 换行并第一行在下方 /
flex-flow: <flex-direction> || <flex-wrap>;
/主轴方向和换行简写 /
justify-content: flex-start | flex-end | center | space-between | space-around;
/主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 /
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）/

项目的属性

order: <integer>;
/排序：数值越小，越排前，默认为0/
flex-grow: <number>; /* default 0 /
/放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）*/
flex-shrink: <number>; /* default 1 /
/缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）*/
flex-basis: <length> | auto; /* default auto /
/固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，/
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. 结束语

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

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

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

DIEA

手记
篇

粉丝

63

获赞与收藏

386

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 28699 323

网络编程入门教程

20个小节 11926 225

Pandas 入门教程

25个小节 17358 313

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Flex语法——弹性布局

0. 前言

1. 基本概念

2. 标签属性

容器的属性

项目的属性

3. 代码实现

3.1 容器的属性

一、flex-direction

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

二、flex-wrap

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

三、flex-shrink

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

四、align-items

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-items: stretch

五、align-content

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: stretch

3.2 项目的属性

一、order

二、flex-grow

三、flex-shrink

四、flex-basis

五、align-self

4. 结束语

阅读免费教程