10分钟理解CSS3 FlexBox弹性布局

基本介绍

特点

  • flexbox是一种css display类型,提供一种更简单高效的布局方式;
  • flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距;
  • flexbox对响应式有很好的支持;

工作原理

设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

兼容性

Flex Container

先来看一个最简单的flex示例,外层div设置display: flex成为一个flex container,内部的3个div则自动变为flex item:

html:

<div class="flex-container">
  <div class="box>
.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

效果:

效果与浮动布局类似,但是如果用浮动实现的话需要写更多的代码,而flex一行就搞定了。

1. Justify Content

如果我们想让flex item居中排列呢,我们可以给flex container增加一个css属性:justify-content,它控制flex item在主轴方向(main axis,由flex-drection决定,默认为水平方向)上的对齐方式:

.flex-container{
  ...
  justify-content: center;
}

效果如图:

除此之外justify-content还可以设置为flex-start, flex-end, space-around, space-between, space-even等值,具体效果请自行实验。

2. Align Items

实现了flex方向的居中后,垂直于主轴方向(cross axis)的居中可以用align-items实现。

css:

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  justify-content: center;
  height: 200px;
  background-color: white;
  align-items: center;
}

效果:

使用flex解决了以往css垂直居中实现复杂的问题!相应的,align-items还有flex-start, flex-end等其他值。

3. Flex Direction

flex-direction决定了主轴方向即flex item排列方向,除了默认的row方向之外,还可以纵向、反向(row-reverse/column-reverse)排列flex item:

css:

.flex-container{
  ...
  
  flex-direction: column;
  align-items: center;
}

效果:

4. Flex Wrap

如果我们不想在窗口变窄的情况下压缩flex item,而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.box{
  height: 100px;
  min-width: 300px;
  flex-grow: 1;
}

当我们压缩窗口的时候,效果如下:

flex wrap还有一个值:wrap-reverse,设置该值后,被wrap的元素会排到其他元素上面:

由此可见,flex wrap一定程度上可以取代media query了。

5. Flex Row

最后,flex-directionflex-wrap

10分钟理解CSS3 FlexBox弹性布局

扫一扫手机访问