css flex布局

原文地址：《w3c前端开发者》>?css flex弹性布局详解

今天在帮公司做官网后台，其中某处就涉及到flex布局，所以这里就来总结下，而之前的“最毕设”后台也是因为布局问题而采用了居中的做法，类似于微信公众号后台布局，做起来比较得心应手。

一般布局传统解决方案，基于盒状模型，以来display属性+position属性+float属性，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

百分比“坑”：(见下图)左侧菜单栏使用了fixed固定死，右侧内容区width:100%，并向左侧margin-left:200px; “编辑外观”板块直接按100%写死。到了“新闻中心”和“案例中心”，问题就来了，如何适应不同大小的屏幕？两个板块如何在不同屏幕下并列展示。px显然不适合，就开始考虑使用百分比了，但是百分比致命在于不够精确，如果左侧新闻中心和案例中心各采用45%，并且两板块间隔20px，大屏幕下，必然会在最右侧留下屏幕宽度的10%-40px的宽度。如果你尝试着把比例拉大至各48%，那么剩下的4%如果比40px还小，意味着屏幕不够用，案例中心板块就会下移。很显然百分比这种做法 并不可取。所以这里使用flex无疑是做好的选择。

最后根据设计图，完成如下：其中用了下媒体查询，当屏幕大于980px时，默认显示单行并列，可适应任意大小屏幕，小于时则让案例中心挤下去，并将两板块长度拉伸至100%.

这里我们主要来介绍flex布局（flexible box的缩写），“弹性布局”。

任何一个容器都可以指定为Flex布局。

1
2
3
<span class="token selector">.box</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

行内元素也可以使用Flex布局。

1
2
3
<span class="token selector">.box</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Webkit内核的浏览器，必须加上

前缀。

1
2
3
4
<span class="token selector">.box</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-flex<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* Safari */</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

注意，设为Flex布局以后，子元素的

、

和

属性将失效。

容器的属性

以下6个属性设置在容器上。

• flex-direction （主轴方向，也就是排列方向了）
• flex-wrap ?（是否换行）
• flex-flow ?（

  1	flex-direction

  属性和

  1

  flex-wrap

  属性的简写形式，默认值为

  1	row nowrap

  。）

• justify-content ?（项目在主轴上的对齐方式）
• align-items （定义项目在交叉轴上如何对齐）
• align-content ?（定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）

关于flex具体使用方法可查看这里：http://www.k88.net/12742.html

ok，如果你看完了上面flex具体使用方法，那么我们就来一起解决这个布局问题。

首先来看一下html结构：flexbox-container的div包含两个需要弹性布局的div，分别为“jy-news”和“jy-obj”。

<div class=”flexbox-container”>
<div class=”jy-news”>
<div class=”news-title”>
<h2>新闻中心</h2>
</div>
<div class=”line”></div>

</div>

<div class=”jy-obj”>
<div class=”news-title”>
<h2>案例中心</h2>
</div>
<div class=”line”></div>

</div>
</div>

接下来主要分析下css了，（下面的css用的sass写的，结构上更清晰易懂，所以这里也建议大家做项目使用sass，配合compass自动生成css样式，更加便捷。）

首先需要对主容器.flexbox-container设置display属性为flex布局，然后我们的默认排列方式是水平，这里可以写上，flex-direction: row;

@media screen and (max-width: 980px){ ? ? ? ? ?//这是媒体查询
.flexbox-container{
flex-wrap: wrap; ? //小于980px的屏幕，将flex设置为wrap，也就是竖直排列

}
.jy-news{
width:100% !important; ?//并且宽度拉伸至100%
}
}

.flexbox-container{
display: -ms-flex;
display: -webkit-flex;
display: flex; ?//设置flex布局
flex-direction: row; ?//默认主轴方向为水平，这里可省略。
justify-content:flex-start; ?//居左

.jy-news{

background-color:white;
margin-top:10px;
float:left;

margin-right:20px;
width:50%; ? //这时候我们可以将板块宽度设置为 50%，并设置了margin-right:20px时候，并不会被挤下去。
height:300px;
.news-title{
padding:20px;
}

}

.jy-obj{
@extend .jy-news; ?//第二个板块直接可以继承第一个。（可以去了解下sass语法即可。）
}

}