1、flex布局与传统布局的区别

传统布局：

兼容性好但是布局繁琐
局限性，不能再移动端很好的布局

flex布局：

操作方便，布局简单，移动端应用广泛
但是IE11或更低版本不支持flex布局

使用范围：
1、如果是PC端页面布局，建议使用传统布局
2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局

2、flex布局原理

flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

flex布局注意事项

当我们为父盒子设为flex布局后，子元素的float、clear、和vertical-align属性都将会失效
伸缩布局 = 弹性布局 = flex布局

3、flex布局父项常见属性（设置在父元素上的属性）

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素的排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式(多行)
align-items：设置侧轴上的子元素排列方式(单行)
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.1、flex-direction(设置主轴的方向)

在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

设置侧轴排列

          .container {display: flex;width: 1200px;height: 600px;margin: 0 auto;             background-color:cornsilk;/*设置为侧轴排列*/flex-direction: column;}.container span {width: 200px;height: 100px;text-align: center;line-height: 100px;background-color: cornflowerblue;}<div class="container"><span>东</span><span>南</span><span>西</span><span>北</span></div>

效果图.png

3.2、justify-content(设置主轴上的子元素的排列方式)

justify-content属性定义了项目在主轴上的对齐方式，使用前必须确定好谁是主轴.

属性值	说明
flex-start	默认值，从头部开始，如果主轴是X轴，则从左往右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是X轴则水平居中)
space-around	平分父级空间排列
space-between	先两边贴边，再去平分剩下的孔家排列

          .flexStart {display: flex;width: 300px;height:80px;margin: 0 auto;             background-color:cornsilk;/*设置子元素排列方式*/justify-content: flex-start;/*设置为侧轴排列*/flex-direction: row;}.flexStart span {width: 50px;height: 30px;text-align: center;line-height: 30px;margin-right: 1px;background-color: blueviolet;}<div class="flexStart"><span>东</span><span>南</span><span>西</span><span>北</span></div>

效果图示.png

3.3、flex-wrap(设置子元素是否换行)

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

属性值	说明
nowrap	默认值，不换行
wrap	换行

           .wrapBefore {display: flex;width: 300px;height: 80px;margin: 0 auto;background-color: cornsilk;/*设置元素是否换行*/flex-wrap: nowrap;/*设置子元素排列方式*/justify-content: space-between;/*设置为侧轴排列*/flex-direction: row;}.wrapAfter {display: flex;width: 300px;height: 80px;margin: 0 auto;background-color: cornsilk;/*设置元素是否换行*/flex-wrap: wrap;/*设置子元素排列方式*/justify-content: space-between;/*设置为侧轴排列*/flex-direction: row;}.wrapBefore span, .wrapAfter span {width: 70px;height: 30px;text-align: center;line-height: 30px;margin-right: 1px;background-color: blueviolet;}<h3>换行前</h3><div class="wrapBefore"><span>东</span><span>南</span><span>西</span><span>北</span><span>多的</span></div><h3>换行后</h3><div class="wrapAfter"><span>东</span><span>南</span><span>西</span><span>北</span><span>多的</span></div>

效果.png

3.4、 align-items(设置侧轴上的子元素排列方式(单行))

align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

            .flexstart {display: flex;width: 300px;height: 80px;margin: 0 auto;background-color: cornsilk;/*设置子元素侧轴对齐方式*/align-items: flex-start;/*设置元素是否换行*/flex-wrap: nowrap;/*设置子元素排列方式*/justify-content: space-between;/*设置为侧轴排列*/flex-direction: row;}.flexstart span, .flexEnd span, .center span {width: 70px;height: 30px;text-align: center;line-height: 30px;margin-right: 1px;background-color: blueviolet;}.stretch span {width: 70px;text-align: center;line-height: 30px;margin-right: 1px;background-color: blueviolet;}<div class="flexstart"><span>东</span><span>南</span><span>西</span><span>北</span></div>

效果.png

这里有个特别需要注意的点：在使用拉伸的时候，千万不能给子元素设置高度，否则它是无法进行拉伸的。

3.5、 align-content(设置侧轴上的子元素排列方式(多行))

设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子元素在侧轴上平分侧轴空间
space-between	子元素在侧轴上先分布在两头，再去平分剩余空间
stretch	设置子元素高度平分父级元素的高度

          .flexstart {display: flex;width: 300px;height: 200px;margin: 0 auto;background-color: cornsilk;/*设置子元素侧轴对齐方式*/align-content: flex-start;/*设置元素是否换行*/flex-wrap: wrap;/*设置子元素排列方式*/justify-content: space-between;/*设置为侧轴排列*/flex-direction: row;}.flexstart span {width: 70px;height: 30px;text-align: center;line-height: 30px;margin-top: 1px;margin-right: 1px;background-color: blueviolet;}

图1.png

图2.png

3.6、 flex-flow(设置主轴方向以及设置是否换行，一种复合写法)

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow:row  wrap; //主轴为x轴，并且换行

4、flex布局子项常见属性（设置在子元素上的属性）

flex布局中子元素也存在着相对应的一些属性

4.1、flex(子元素占的份数)

flex属性定义子元素分配剩余空间，用flex来表示占的多少份，默认为0
针对这个，可以先了解有名的CSS布局圣杯布局以及双飞翼布局,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。

          .demo {display: flex;width: 60%;height: 200px;/*margin: 0 auto;*/border: 1px solid darkblue;background-color: azure;}.demo div:nth-child(1){width: 100px;height: 100%;text-align: center;line-height: 200px;background-color: chocolate;}.demo div:nth-child(3){width: 100px;height: 100%;text-align: center;line-height: 200px;background-color: chocolate;}.demo div:nth-child(2){flex: 1;height: 100%;text-align: center;line-height: 200px;background-color: blueviolet;}<div class="demo"><div>左侧</div><div>中间</div><div>右侧</div></div>

css平分剩余空间.gif

4.2、align-self(控制子元素自己在侧轴上的排列方式)

align-self属性允许单个的子元素与其他子元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。

           .demo {display: flex;width: 60%;height: 200px;margin: 0 auto;/*水平居中*/justify-content: center;/*垂直居中*/align-items: center;background-color:bisque;}.demo div {width: 15%;height: 80px;text-align: center;line-height: 80px;background-color: blueviolet;}.demo div:nth-child(2){/*让第二个子元素flex-end排列*/align-self: flex-end;}

第二个子元素flex-end排列.png

4.3、order(控制子元素的排列顺序)

order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0

            .demo {display: flex;width: 60%;height: 200px;margin: 0 auto;/*水平居中*/justify-content: center;/*垂直居中*/align-items: center;background-color:bisque;}.demo div {width: 15%;height: 80px;text-align: center;line-height: 80px;order: 2;background-color: blueviolet;}                   .demo div:nth-child(2){/*让第二个子元素flex-end排列*/align-self: flex-end;/*将第二个放前面去,order设置小即可*/order: 1;}

首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。

Flex布局：Flex布局相关推荐

CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
flex将元素放在最后_前端布局——Flex弹性布局
本篇解释了有关flexbox的知识点内容,重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性. 背景 Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置 ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...
flex 平铺布局_flex布局及各种布局的总结
Flexbox display: flex; 如果也想设置内联元素为弹性盒子,可以使用display:inline-flex; 实现三种其他布局难以达到的效果: 在父内容里面垂直居中一个块内容. 使容 ...
Flex 流式布局之滚动条篇
Flex 流式布局之滚动条篇 flex 框架支持流式布局,什么是流式布局呢,就是在运行时对象的大小是未知的,它可能需要由他的内容(childs)或由它的容器来决定它的实际大小.flex 中有两种流 ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
CSS3/ 弹性布局flex
需知: flex布局表示弹性布局任何一种元素都可以设置且当它设置 display:flex ,则开启了弹性布局,它成为弹性容器,它的所有子元素成为待排布的项目开启弹性布局后,容器内待排布的项目的f ...
java窗口三栏布局_移动端的flex三栏布局的相关知识介绍（代码示例）
本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 默认情况下先显示移动端,通过 @media 属性适配屏 ...

Flex布局：Flex布局

1、flex布局与传统布局的区别

2、flex布局原理

3、flex布局父项常见属性（设置在父元素上的属性）

4、flex布局子项常见属性（设置在子元素上的属性）

Flex布局：Flex布局相关推荐

最新文章

热门文章