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

于 2019-11-03 15:10:32 发布
阅读量762 收藏 19
点赞数 4
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38207472/article/details/102882705
版权

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布局的便利性，对于长期用定位浮动的同学来说，那简直是看到未来的又一曙光，简洁的代码，强大的功能，解放我们的双手，走向巅峰。

评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值