浅撸 css3 flex 布局

  1. 云栖社区>
  2. 博客>
  3. 正文

浅撸 css3 flex 布局

西游不取经 2016-02-06 19:22:59 浏览643
展开阅读全文

放假无聊,五行缺撸,索性就这么撸篇博客咯,聊以自慰。

css3 中flex布局 即为弹性布局,在实现响应式,是非常好的。当然对于传统的position,float布局,如果完全只考虑移动端很大程度上能做到去float化了。但是pc端就不行,需要考虑到ie6,ie7,ie8。。。。具体看自己公司咯。这么要求,真像一个现代穿着比基尼的大胸女人,却还要要求她裹脚。。扯远了····

flex是用在父元素上的,即display:flex; 当然子元素水平居中,垂直中,或者完全居中的样式也都写在父元素上。对于子元素 可单独控制子元素大小。

问题是直接这么用flex 是由问题的就是前缀问题。-webkit-,-moz-, -ms-, -o-,而且还有 09年出的标准(box),11年后的标准(flexbox,ie10特有),和12年后至今的(flex)。所以呢,需要一个公共类,或者工具类了

.df{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
容器还有属性:

flex-direction 子元素的排列方式 水平竖直

flex-wrap  是否换行

flex-flow    flex-direction属性和flex-wrap属性的简写形式

justify-content    水平方向的排列

align-items  垂直方向的排列 

align-content  多列或多行的对齐方式

子元素属性:

order  排列顺序。数值越小,排列越靠前,默认为0

flex-grow  放大比例

flex-shrink 缩小比例

flex-basis 根据每项设置的基准值,按比率伸缩剩余空间

flex   flex-grow, flex-shrink flex-basis的简写,默认值为0 1 auto

align-self 脱离容器的对齐方式 单独定义

以上每个属性都要 涉及到前缀,产生的css就比较多了,所以每一个属性都可以定一个公共的类 减少代码量

如flex  天朝的 移动端  浏览器内核都是webkit 就可以只考虑 webkit了,,连opeara 都放弃自家内核 转头 内核都换webkit了 这行为 当时让多少粉丝 很不情愿。。。。

.flex1{
    -webkit-box-flex:1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


要是用less(或者sass)开发,还可以这么定义一个

.flex(@val){
    -webkit-box-flex:@val;
    -webkit-flex: @val;
    -ms-flex: @val;
    flex: @val;
}
某一个子类(项目)

item{
     .flex(2)
}
这样能减少写的时间 了。

好了 ,该扯蛋点具体的布局了,

我们需要 并排的几个元素 一般用float ,或者display:inline-block,一个要清除浮动 clear 或者overflow:hidden,

而 display:inline-block 容器需要设置 font-size:0;vertical-align:top;


e

用 flex 了在容器(父元素)上一个

<div class="xxxxx  df">
     <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
<div>




移动端  为了自适应 百分比

.item{
    width:33.33333333333333%
}
换个办法 也可以
<div class="xxxxx container  df">
     <div class="item flex1"></div>
   <div class="item flex1"></div>
  <div class="item flex1"></div>
<div>



很nice的完成了。

对于居中  水平垂直同时居中吧,

<div class="xxxxx  container">
     <div class="item"></div>
</div>


.container{
        position:relative;
        top:100px;
	left:100px;
	width:200px;
	height:200px;
	background-color:gray;
}
.item{
	position:absolute;
	width:20px;
	height:20px;
	background-color:red;
	top: 50%;
	left:50%;
	margin:-10px 0 0 -10px;
}

加入css3 也能搞定

.item{
	position:absolute;
	width:20px;
	height:20px;	
	background-color:red;
	top: 50%;
        left:50%;
	transform:translate(-10px,-10px);
}
这样的弊端就是 你需要确切知道 item 的 width ,height 大小,利用  flex 就不用这么顾虑

<div class="xxxxx  container">
     <div class="item">fuckfuck</div>
</div>


.container{
	top:100px;
	left:100px;
	width:200px;
	height:200px;
	background-color:gray;
        /* 水平居中*/
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-pack:center;/* IE 10 */

      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/
      
      /* 垂直居中 */
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-align:center;/* IE 10 */
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center
}
.item{background-color:red;}


文字单行居中 很简单的 height 和line-height 一样就行了  多行的 话 就用padding  如今用

align-items: center


就可以了

如下这样居中呢

还是给容器使用:

 align-items: center


诸如此类 利用flex:1; 可以放弃使用float,但此项目不是 块元素的 需要dispaly:block ,国内有些浏览器就是这么蛋疼的。

多列的等高布局,

传统下 item1,item2, height都是atuo 需要给1,2设定不同的背景色,意淫的办法就是给容器设置左右border 颜色和 width,同时relative。tiem1,2 就absolute,定位

flex 布局下用

.item{

    aling-items:stretch;

}

同理 为三行时也是这样做法。


。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。

。。。。。。。。。。。

。。。。。。。。。

。。。。。。。

。。。。。

。。。

扯淡完毕。






网友评论

登录后评论
0/500
评论
西游不取经
+ 关注