CSS3 FlexBox是什么

这篇文章主要讲解了“CSS3 FlexBox是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3 FlexBox是什么”吧！

　　基本介绍

　　特点

　　flexbox是一种css display类型，提供一种更简单高效的布局方式；

　　flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距；

　　flexbox对响应式有很好的支持；

　　工作原理

　　设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等；

　　兼容性

　　Flex Container

　　先来看一个最简单的flex示例，外层div设置display: flex成为一个flex container，内部的3个div则自动变为flex item：

　　html:

　　<div class="flex-container">

　　<div class="box one"></div>

　　<div class="box two"></div>

　　<div class="box three"></div>

　　</div>

　　css:

　　.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }

　　.box{ height: 100px; min-width: 100px; }

　　.one{ background: pink; }

　　.two{ background: lightgreen; }

　　.three{ background: skyblue; }

　　效果：

　　效果与浮动布局类似，但是如果用浮动实现的话需要写更多的代码，而flex一行就搞定了。

　　1. Justify Content

　　如果我们想让flex item居中排列呢，我们可以给flex container增加一个css属性：justify-content，它控制flex item在主轴方向（main axis，由flex-drection决定，默认为水平方向）上的对齐方式：

　　.flex-container{

　　...

　　justify-content: center;

　　}

　　效果如图：

　　除此之外justify-content还可以设置为flex-start, flex-end, space-around, space-between, space-even等值，具体效果请自行实验。

　　2. Align Items

　　实现了flex方向的居中后，垂直于主轴方向（cross axis）的居中可以用align-items实现。

　　css：

　　.flex-container{

　　max-width: 960px;

　　margin: 0 auto;

　　display:flex;

　　justify-content: center;

　　height: 200px;

　　background-color: white;

　　align-items: center;

　　}

　　效果：

　　使用flex解决了以往css垂直居中实现复杂的问题！相应的，align-items还有flex-start, flex-end等其他值。

　　3. Flex Direction

　　flex-direction决定了主轴方向即flex item排列方向，除了默认的row方向之外，还可以纵向、反向（row-reverse/column-reverse）排列flex item：

　　css：

　　.flex-container{

　　...

　　flex-direction: column;

　　align-items: center;

　　}

　　效果：

　　4. Flex Wrap

　　如果我们不想在窗口变窄的情况下压缩flex item，而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap：

　　.flex-container{

　　max-width: 960px;

　　margin: 0 auto;

　　display:flex;

　　flex-wrap: wrap;

　　}

　　.box{

　　height: 100px;

　　min-width: 300px;

　　flex-grow: 1;

　　}

　　当我们压缩窗口的时候，效果如下：

　　flex wrap还有一个值：wrap-reverse，设置该值后，被wrap的元素会排到其他元素上面：

　　由此可见，flex wrap一定程度上可以取代media query了。

　　5. Flex Row

　　最后，flex-direction和flex-wrap可以合并为一个属性flex-flow，比如：flex-flow: row-reverse wrap。

　　Flex Item

　　1. Flex Grow

　　在上面所有的例子中，三个flex item只占据了flex container小部分空间，如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义，grow意味着增长，用于控制flex item的尺寸的伸展。

　　将css修改为:

　　.box {

　　height: 100px;

　　min-width: 100px;

　　flex-grow:1;

　　}

　　效果：

　　可以看到三个子元素平分了父元素的空间，因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢？

　　css：

　　.box{ height: 100px; min-width: 100px; }

　　.one{ background: pink; flex-grow: 1; }

　　效果：

　　此时two和three的大小不变，而one占据了父元素剩余空间。

　　如果将one的flex-grow改为2，而two和three改为1，我们看看会发生什么：

　　css:

　　.box{ height: 100px; min-width: 100px; flex-grow:1; }

　　.one{ background: pink; flex-grow: 2; }

　　效果：

　　可以看到one的宽度变成了two和three的两倍，因此flex item的尺寸和flex-grow的值成正比。

　　2. Flex Shrink

　　与flex-grow相对的是flex-shrink， flex-shrink用于控制子元素尺寸超过flex container后，对子元素的压缩。请看示例：

　　修改box的宽度为flex container的1/3，one、two、three的flex-shrink分别为1，2，3：

　　.box{ height: 100px; width: 320px; }

　　.one{ background: pink; flex-shrink: 1; }

　　.two{ background: lightgreen; flex-shrink: 2; }

　　.three{ background: skyblue; flex-shrink: 3; }

　　当窗口正常尺寸时，效果如下：

　　当我们压缩窗口使其变得更窄后，效果如下：

　　当flex container宽度变为540px后，子元素都被不同程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px，所以相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px，70 : 140 : 210 = 1 : 2 : 3，与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系，只不过当初始尺寸一样时它带来的影响被忽略了。

　　假设flex shrink为fs，flex item的初始尺寸为is，flex item被压缩的尺寸为ss，则正确的表达式为：

　　fs &prop; is/ss

　　3. Flex Basis

　　flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢？flex-basis和width/height有如下的区别：

　　flex-basis只能用于flex-item，而width/height可以应用于其他类型的元素；

　　flex-basis和flex-direction有关，当flex-direction为row的时，flex-basis设置的是宽度，当flex-direction为column时，flex-basis设置的是高度；

　　当flex item被绝对定位后（absolute position），flex-basis不起作用，而width/height可以；

　　flex-basis可以用于flex的简写形式，如：flex: 1 0 200px;

　　我们来看一下flex-basis的作用，将css修改如下：

　　.box{

　　height: 100px;

　　flex-grow: 1;

　　}

　　.one{

　　background: pink;

　　flex-basis: 100px;

　　}

　　.two{

　　background: lightgreen;

　　flex-basis: 200px;

　　}

　　.three{

　　background: skyblue;

　　flex-basis: 300px;

　　}

　　3个flex item都在原来的初始宽度基础上增加了相同的宽度：

　　当然，这个例子如果换成使用width也是一样的效果，但是虽然效果一样但意义不一样，所以使用flex布局时还是应该尽量遵守规范，选合适的人去干正确的事。

　　4. Order

　　通过order属性我们可以改变flex item的排列顺序，例如：

　　html:

　　<section id="blocks">

　　<div class="one">1</div>

　　<div class="two">2</div>

　　<div class="three">3</div>

　　<div class="four">4</div>

　　</section>

　　css：

　　#blocks{

　　display: flex;

　　margin: 10px;

　　justify-content: space-between;

　　}

　　#blocks div{

　　flex: 0 0 100px;

　　padding: 40px 0;

　　text-align: center;

　　background: #ccc;

　　}

　　默认排列顺序是按照flex item在html中的出现顺序：

　　当我们修改flex item的order值后，flex item会按照order值升序排列：

　　css：

　　.one{ order: 4; }

　　.two{ order: 3; }

　　.three{ order: 2; }

　　.four{ order: 1; }

感谢各位的阅读，以上就是“CSS3 FlexBox是什么”的内容了，经过本文的学习后，相信大家对CSS3 FlexBox是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！