超神的flex布局，解放你的双手

最新推荐文章于 2023-02-24 20:40:00 发布

Hans Huang

最新推荐文章于 2023-02-24 20:40:00 发布

阅读量704

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_38207472/article/details/102882705

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

flex布局是CSS3推出的新特性，也叫弹性布局。如果你学习了以前传统的定位浮动布局，你再来接触flex，你会有一种“风雨过后是彩虹”的感觉。flex布局的强大，让前端工程师爱不释手。

1、布局原理

flex就是弹性布局，任何元素都可以使用flex布局，十分强大。
当父元素被设置为flex布局之后，子元素的float、vertical-align都会失效
一句话：flex就是给父元素添加flex属性，接着控制子元素的排列规则

2、父元素属性

2.1、flex-direction：设置主轴方向

1、主轴与侧轴
在flex布局中，主轴默认为x轴，侧轴默认为y轴。
(https://img-blog.csdnimg.cn/20191103145715371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODIwNzQ3Mg==,size_16,color_FFFFFF,t_70)
2、属性值

属性值	效果
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

3、如果属性值设为column，y轴将变成主轴，后续所有属性都会反过来。

2.2、justify-content：设置主轴上子元素排列方式

1、属性值

注意：以下属性使用时应注意主轴方向的设定

属性值	效果
flex-start	默认从主轴头部向末端排列
flex-end	从主轴末端向头部排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先固定首尾元素在主轴头部和尾部，再平分剩余空间

2、以flex-direction:row为例，原始代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: #44d6ee;
            /* 不设置flex-direction，默认为row */
            /* flex-direction: row; */
        }
        div span{
            width: 150px;
            height: 120px;
            background: #ff8181;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXWqevG1-1572764126053)(http://note.youdao.com/yws/res/2897/WEBRESOURCE29a699d0369c806618a3a5963ce60551)]

justify-content: flex-start

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    justify-content: flex-start;
}

在这里插入图片描述

justify-content: flex-end

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    justify-content: flex-end;
}

在这里插入图片描述

justify-content: center

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    justify-content: center;
}

在这里插入图片描述

justify-content: space-around

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    justify-content: space-around;
}

在这里插入图片描述

justify-content: space-between

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    justify-content: space-between;
}

在这里插入图片描述

2.3、flex-wrap：设置子元素是否换行

1、属性值

属性值	效果
nowrap	默认不换行
wrap	当挤不下去就换行

2、以flex-direction: row为例，原始代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: #44d6ee;
            border: 1px solid #000;
        }
        div span{
            width: 150px;
            height: 120px;
            background: #ff8181;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述
我们发现，无论你怎么加元素，始终平分，不会换行，因为默认flex-wrap: nowrap。

flex-wrap: nowrap

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    flex-wrap: nowrap;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mgXqYlqB-1572764126055)(http://note.youdao.com/yws/res/2945/WEBRESOURCE41667caf8bbeb637c95513418c6d1a6b)]

flex-wrap: wrap

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    flex-wrap: wrap;
}

在这里插入图片描述

2.4、align-items：设置侧轴上单行子元素排列方式

属性值	效果
flex-start	默认靠在侧轴头部
flex-end	靠在侧轴尾部
center	挤在一起侧轴居中
stretch	拉伸

align-items: flex-start

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    align-items: flex-start;
}

在这里插入图片描述

align-items: flex-end

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    align-items: flex-end;
}

在这里插入图片描述

align-items: center

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    align-items: center;
}

在这里插入图片描述

align-items: stretch

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    align-items: stretch;
}
/* 注意子元素不要给高度，会自动拉伸 */
div span{
    width: 150px;
    background: #ff8181;
    border: 1px solid #000;
}

2.5、align-content：设置侧轴上单行子元素排列方式

属性值	效果
flex-start	默认侧轴头部往尾部排列
flex-end	从侧轴尾部往头部排列
center	在侧轴中间显示
space-around	子元素平分侧轴剩余空间
space-between	先固定两头，再平分剩余空间
stretch	子元素高度平分父元素高度

align-content: flex-start

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    flex-wrap: wrap;
    align-content: flex-start;
}

在这里插入图片描述

align-content: flex-end

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    flex-wrap: wrap;
    align-content: flex-end;
}

在这里插入图片描述

align-content: center

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    flex-wrap: wrap;
    align-content: center;
}

在这里插入图片描述

align-content: space-around

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    flex-wrap: wrap;
    align-content: space-around;
}

在这里插入图片描述

align-content: space-between

div{
    display: flex;
    width: 800px;
    height: 400px;
    background-color: #44d6ee;
    border: 1px solid #000;
    flex-wrap: wrap;
    align-content: space-between;
}

在这里插入图片描述

2.6、flex-flow：flex-direction + flex-wrap

实现代码简化的目的

flex-flow：row-reverse wrap

2、子元素属性

flex：子项占的份数
align-self：控制自己的排列方式
order：设置子元素的排列顺序

咱们就用一个三栏双飞翼布局来理解吧！

<!doctype html>
<html lang="zh-CN">
<head>
    <style>
        section{
        	width: 60%;
        	background-color: pink;
        	margin: 0 auto;
        	display: flex;
        }
        section div:nth-child(1){
        	width: 200px;
        	height: 300px;
        	background-color: #f40;
        }
        section div:nth-child(3){
        	width: 300px;
        	height: 300px;
        	background-color: #5bd8de;
        }
        section div:nth-child(2){
        	flex: 1;
        	order: -1;
        	background-color: #a6f1a6;
        }
    </style>
</head>
<body>
    <section>
		<div></div>
		<div></div>
		<div></div>
    </section>
</body>
</html>

效果如下：
在这里插入图片描述
我们非常轻松地实现了这一布局，相较于之前的定位和浮动，要简练得多。
甚至于我们可以随意更改三者顺序，注意order数值越小，排的位置越前。对于我们希望把主要内容代码放前一些的需求，以便于搜索引擎快速抓到，flex的order可以很轻松地解决我们的问题。

<!doctype html>
<html lang="zh-CN">
<head>
    <style>
        section{
        	width: 60%;
        	background-color: pink;
        	margin: 0 auto;
        	display: flex;
        }
        section div:nth-child(2){
        	width: 200px;
        	height: 300px;
        	order: 1;
        	background-color: #f40;
        }
        section div:nth-child(3){
        	width: 300px;
        	height: 300px;
        	order: 3;
        	background-color: #5bd8de;
        }
        section div:nth-child(1){
        	flex: 1;
        	order: 2;
        	background-color: #a6f1a6;
        }
    </style>
</head>
<body>
    <section>
		<div class="importantContent">这里是很重要的内容</div>
		<div></div>
		<div></div>
    </section>
</body>
</html>

经过order的顺序调整，我们同样可以实现，主要元素代码靠前，视觉放中间的目的。
在这里插入图片描述

3、结语

以前一直没有系统地学习flex布局，它的名声只活在我的梦里。明天要去深圳面试一家不错的公司，想起上次没有解决面试官的一个问题，flex布局应该会是一种高效的方法。flex布局的便利性，对于长期用定位浮动的同学来说，那简直是看到未来的又一曙光，简洁的代码，强大的功能，解放我们的双手，走向巅峰。

Hans Huang

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
超神的flex布局，解放你的双手

flex布局是CSS3推出的新特性，也叫弹性布局。如果你学习了以前传统的定位浮动布局，你再来接触flex，你会有一种“风雨过后是彩虹”的感觉。flex布局的强大，让前端工程师爱不释手。1、布局原理flex就是弹性布局，任何元素都可以使用flex布局，十分强大。当父元素被设置为flex布局之后，子元素的float、vertical-align都会失效一句话：flex就是给父元素添加fl...
复制链接

扫一扫