移动端的自适应布局神奇—Flex Box(1)

来源：互联网发布：caffe 使用训练好模型编辑：程序博客网时间：2024/05/23 20:30

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; -webkit-text-stroke: #000000}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; -webkit-text-stroke: #000000; min-height: 13.0px}span.s1 {font-kerning: none}

Flex布局，是W3C于2009年提出的一种新的布局方式。传统的CSS布局方式，经常会出现一些很难控制的问题，比如垂直居中、多列布局的自适应问题等。而Flex布局方式，可以很方便的实现这些功能，而且不容易出现布局错误。

最重要的是，在移动端Web开发过程中，采用Flex布局模式进行开发的效率是非常高的。Flex布局，更适合H5应用开发。

Flex，顾名思义，就是非常灵活的一种布局方式。一般的Flex布局中，首先都会有一个整体元素，称为flex box。这个容器元素内部包含着的其他元素，就可以很灵活的适应整个容器的变化，而不会出现布局上的紊乱。注意，在flex box元素中，元素的某些属性会失效，包括float、clear及vertical-align属性。

在接下来的博客中，将带大家学习Flex Box各种属性，以及如何利用这些属性实现自适应布局。随文章附上了许多实验代码供大家参考。

弹性容器，指的就是使用flex布局的整体的父元素。这个父元素的所有子元素，都属于这个flex容器的成员，称为弹性项目。要想让一个容器成为弹性容器，必须设置这个元素的display属性为flex或者inline-flex。与block和inline一样，flex和inline-flex都能将一个元素设定为弹性容器，区别是实用flex属性值这个元素就是一个块级元素的弹性容器，而实用inline-flex属性值，这个元素就是一个保持了inline属性的弹性容器。

弹性容器和弹性项目都可以通过设定一些属性，达到我们想要的布局效果。那么一个弹性容器的内部是什么样的呢？

每一个弹性容器都有一个水平轴和一个纵轴线，弹性容器中的弹性项目，就要根据这两条轴线的方向进行排列。具体按照哪个轴线排列，可以定义弹性容器的flex-direction属性进行设定。

一、flex-direction属性

flex-direction属性有四个属性值：row，row-reverse，column，column-reverse。它们分别表示沿水平轴线从左向右排序，沿水平轴线从右向左排序，沿竖直轴从上到下排列，以及沿竖直轴从下到上排列。

下面的例子就是一个Flex布局例子，每个子元素都进行了编号，来直观看看弹性容器不同的flex-direction属性值是如何影响弹性项目的布局效果的。

代码：

<!DOCTYPE><html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><style type="text/css">.container{  display:flex;  display:-webkit-flex;  border: 2px solid black;  padding: 20px;  margin: 20px;}.item{  background: green;  width: 100px;  height: 100px;  margin: 10px;  font-weight: bold;}.row{  flex-direction: row;}.row-reverse{  flex-direction: row-reverse;}.column{  flex-direction: column;}.column-reverse{  flex-direction: column-reverse;}</style></head><body><div class="container row">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div><div class="container row-reverse">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div><div class="container column">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div><div class="container column-reverse">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div></body></html>

打开浏览器，即可直观观察到flex-direction属性对于元素布局的影响。使用row属性值时，元素会从左侧开始布局，使用row-reverse属性值时，元素会从右侧开始布局。使用column和column-reverse时结果类似，只是变成竖直方向的布局了。

现在，我们缩小网页的屏幕，来看一下会发生什么效果。当我们缩小网页屏幕到一定范围后，所有弹性项目会发生等比例的收缩，从而保证元素的排列布局没有任何紊乱。这就是flex布局最惊人的地方。如何控制弹性项目收缩的程度，将在下面的例子中继续介绍。这个特性也是为什么弹性项目广泛应用于移动端应用的原因，它可以很好的适应各种分辨率的手机屏幕。

另外一个需要注意的是，当为父元素设定display属性时，针对-webkit内核的浏览器需要使用-webkit-flex或者-webkit-inline-flex属性值来进行兼容。

二、flex-wrap属性

上面的例子中，不管我们怎么在宽度上缩小父容器，其弹性项目都会以牺牲自身原本的大小来适应父元素的宽度，并排列在一行上。但是有的时候我们并不想改变元素形状，而是当父元素宽度变小的时候，子元素可以自动换行。Flex布局也提供了满足这个需求的方法，可以通过为父元素设定flex-wrap属性来实现。

flex-wrap属性有三个属性值，nowrap属性值是默认属性值，表示不进行换行。wrap和wrap-reverse属性值可以实现元素的自动换行，并且会保形状不变。当父元素收缩时，子元素会保证自己的宽度，一行放不下的情况下会选择换行，其中wrap是正向换行，而wrap-reverse会从反向进行换行。

代码：

<!DOCTYPE><html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><style type="text/css">.container{  display:flex;  display:-webkit-flex;  border: 2px solid black;  padding: 20px;  margin: 20px;  flex-direction: row;}.item{  background: green;  width: 100px;  height: 100px;  margin: 10px;  font-weight: bold;}.nowrap{  flex-wrap: nowrap;}.wrap{  flex-wrap: wrap;}.wrap-reverse{  flex-wrap: wrap-reverse;}</style></head><body><div class="container nowrap">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div></div><div class="container wrap">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div></div><div class="container wrap-reverse">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div></div></body></html>

可以看到，如果弹性容器设置为允许子元素换行，那么这些子元素会保证自己的大小不发生变化。

三、justify-content属性

当元素在一行内显示时，如何规范的规定元素的排列方式呢？Flex布局中可以为父元素设定justify-content属性。这个属性有五个选项值，它们可以用来设定元素不同的对齐方式，类似于在word文章中文字的对齐方式。

flex-start — 设定为左对齐

flex-end — 设定为右对齐

center — 设定为居中对齐

space-between — 设定为居中对齐

space-around — 设定每个元素两侧的距离都相等

为了直观的看一下justify-content属性值的作用，来看下面的例子。

代码：

<!DOCTYPE><html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><style type="text/css">.container{  display:flex;  display:-webkit-flex;  border: 2px solid black;  padding: 20px;  margin: 20px;  flex-direction: row;  flex-wrap: nowrap;}.item1{  background: green;  width: 200px;  height: 100px;  margin: 10px;  font-weight: bold;}.item2{  background: green;  width: 300px;  height: 100px;  margin: 10px;  font-weight: bold;}.item3{  background: green;  width: 100px;  height: 100px;  margin: 10px;  font-weight: bold;}.flex-start{  justify-content: flex-start;}.flex-end{  justify-content: flex-end;}.space-between{  justify-content: space-between;}.space-around{  justify-content: space-around;}.center{  justify-content: center;}</style></head><body><div class="container flex-start">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container flex-end">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container center">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container space-between">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container space-around">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div></body></html>

从上面的例子可以看出，使用justify-content属性，可以很方便的设定好弹性项目在弹性容器之中的对齐方式。

喜欢读书的，喜欢学知识的小伙伴，欢迎关注公众号“精粹微阅读”加入我们哦～～～

1 0