Flexbox布局

jopen 6年前

Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局。它可以实现:

  • 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;
  • 可以快速让他们布局在一列;
  • 可以方便让他们对齐容器的左、右、中间等;
  • 无需修改结构就可以改变他们的显示顺序;
  • 如果元素容器设置百分比和视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

浏览器兼容性

红色代表不支持,绿色代表支持,暗绿色代表部分支持,其中IE10、IE11目前使用中出现了大量的bug,Android4.3只支持老的flexbox规范。可以发现该属性在移动端的使用还是可能的,不过要加上老的规范写法。

容器属性(父元素属性)

主轴 :项目排列方向的轴(可以是水平或者垂直),每一行(列)项目代表一条轴

交叉轴 : 与主轴垂直的轴(可以是水平或者垂直);

可以通过访问 flexBox 测试以下属性

1. display

取值:

  • flex 将对象作为弹性容器显示
  • inline-flex 将对象作为内联块级弹性容器显示。

注: 以下是旧版本的属性值:

box:将对象作为弹性容器显示。(最老版本)

inline-box:将对象作为内联块级弹性容器显示。(最老版本)

flexbox:将对象作为弹性容器显示。(过渡版本)

inline-flexbox:将对象作为内联块级弹性容器显示。(过渡版本)

2. flex-direction 决定主轴的方向(即项目的排列方向)。

取值:

  • row 主轴为水平方向,起点在左端。
  • row-reverse 主轴为水平方向,起点在右端。
  • column 主轴为垂直方向,起点在上沿。
  • column-reverse 主轴为垂直方向,起点在下沿。

3. flex-wrap 设置容器内的项目排列不下时是否换行

取值:

  • wrap 换行
  • no-wrap 一行显示,不换行
  • wrap-reverse 倒序换行,将各行的顺序倒序排列

4. justify-content 定义了项目在主轴上(依据设置的主轴方向而定)的对齐方式。

取值:

  • flex-start 左对齐
  • flex-end 右对齐
  • center 居中对齐
  • space-between 俩端对齐
  • space-around 项目间隔相同对齐

5.align-items 定义项目在交叉轴上的对齐方式。

  • flex-start 起点对齐
  • flex-end 终点对齐
  • center 居中对齐
  • baseline 项目的第一行文字的基线对齐。
  • stretch 如果项目未设置高度或设为auto,将占满整个容器的高度。

6. align-content 当项目有多列(行)时,该属性定义各轴的对齐方式

取值:

  • flex-start 起点对齐
  • flex-end 终点对齐
  • center 居中对齐
  • space-between 项目间隔相同对齐
  • space-around 每行(列)的间隔俩侧相等对齐
  • stretch 项目布满容器对齐

项目属性(子元素属性)

1. order 定义项目的排列顺序。数值越小,排列越靠前,默认为0。

2. flex 定义了项目的大小,是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto

(1) flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

(2) flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

(3) flex-basis 定义项目占据的空间,然后再分配多余空间。

3. align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的

测试用例

这几天在项目中小范围试用了下(移动端),结果UC和微信浏览器不支持,当时就蒙逼了好吗。后来查了下,发现加上老版本的写法和前缀即可。至少借的几个手机测试是通过了。

1
2
3
4
5
</div>

代码:

<div class="flexbox">      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>  </div>    <style>       .flexbox{          display: -webkit-flex;          display: flex;          /*兼容老版本*/          display: -webkit-box;          -webkit-align-items: center;          align-items: center;          /*兼容老版本*/          -webkit-box-align: center;          border:1px solid #000;          min-height:200px;      }      .flexbox>div{          flex: 1;          -webkit-flex: 1;          -webkit-box-flex: 1;          -moz-box-flex: 1;          -ms-flex: 1;          background-color: green;          border:1px solid blue;      }  </style>

如果觉得本文不错的话,帮忙点击下面的推荐哦,谢谢!

>>>>点击阅读原文
</div>

来自: http://www.cnblogs.com/yzg1/p/5127700.html