付费节点推荐

免费节点

节点使用教程

原文地址：《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布局。

.box{
  display: flex;
}

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

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器的属性

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

• flex-direction （主轴方向，也就是排列方向了）
• flex-wrap  （是否换行）
• flex-flow  （flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。）
• justify-content  （项目在主轴上的对齐方式）
• align-items （定义项目在交叉轴上如何对齐）
• align-content  （定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）

关于flex具体使用方法可查看这里：http://bcoder.clbug.com/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语法即可。）
}

}

未经允许不得转载：Bcoder资源网 » css flex布局

相关推荐

更多优质资源关注微信公众号: bcoder