css flex布局

[福利]优酷/爱奇艺/芒果 TV等会员年卡低至4折79元


阿里云香港,新加坡30M带宽服务器,每月仅需24元


[福利]超清2K,4K手机壁纸网站推荐


原文地址:《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%.

jy

jy1

 

bg2015071002

这里我们主要来介绍flex布局(flexible box的缩写),“弹性布局”。

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


.box{
  display: flex;
}

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


.box{
  display: inline-flex;
}

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


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

注意,设为Flex布局以后,子元素的floatclearvertical-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资源网

微信公众号: bcoder资源网

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册