网站首页 » 前端开发 » CSS3 » CSS3 Flex 弹性布局用法详解
上一篇:
下一篇:

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局

Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。

Flex 弹性布局

说明:

1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。

2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。

3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴:水平的叫主轴(main axis)和垂直的叫交叉轴(cross axis)。

Flex容器属性

Flex容器有6种属性可用分别是:

属性 详细说明
flex-direction 决定主轴的方向(即项目的排列方向)
flex-wrap 控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写
justify-content 定义了Flex项目在主轴方向上的对齐方式
align-items 定义项目在交叉轴上的对齐方式
align-content 定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用

下面就逐一给大家介绍这些属性有什么用,以及他们所对应的属性值又是什么意思。

flex-direction

flex-direction: row | row-reverse | column | column-reverse;
属性决定主轴的方向(即项目的排列方向)
名称(属性/值) 详细说明
row(默认值) 主轴为水平方向,起点在左端
row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在上沿
column-reverse 主轴为垂直方向,起点在下沿
效果演示:http://yunkus.com/demo/flexbox/flex-direction.html

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;
属性可以控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向
属性/值 详细说明
nowrap 不换行
wrap 换行
wrap-reverse 换行与wrap相似,但行的顺序是倒过来的
效果演示:http://yunkus.com/demo/flexbox/flex-wrap.html

flex-flow

属性/值 详细说明
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写,默认值为flex-flow : row nowrap

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around;
属性定义了Flex项目在主轴方向上的对齐方式
属性/值 详细说明
flex-start 类似于左浮动(float:left)
flex-end 类似于右浮动(float:right)
center Flex项居中
space-between 两端对齐容器,各个Flex项目之间的间距相等
space-around 每一个Flex项目两侧的间隔相等
效果演示:http://yunkus.com/demo/flexbox/justify-content.html

align-items

align-items: flex-start | flex-end | center | baseline | stretch;
属性定义项目在交叉轴上的对齐方式
属性/值 详细说明
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考,居中对齐
baseline Flex项目第一行文字基线对齐
stretch 如果Flex项目未定义高度或者设置为auto,Flex项目将占满整个窗口的高度
效果演示:http://yunkus.com/demo/flexbox/align-items.html

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
属性定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用
属性/值 详细说明
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考,居中对齐
space-between 交叉轴两端对齐,轴线这间的间隔平均分布
space-around Flex项目(沿交叉轴方向)之间的间隔相等
stretch Flex项目(沿交叉轴方向)占满整个交叉轴
效果演示:http://yunkus.com/demo/flexbox/align-content.html

Flex项目属性

属性/值 详细说明
order 用于控制Flex项目的排列顺序,默认为0,值越小越靠前。可取的值:0 | 1
flex-grow 用于定义Flex项目的放大比例,默认为0,即使存在剩余空间,也不放大。可取的值:0 | 1
flex-shrink 用于定义Flex项目的缩小比例,默认为1,即空间不足,Flex项目将等比缩小。可取的值 0 | 1
flex-basis 用于定义如何分配多余空间默认值为auto,即Flex项目本来的大小
flex flex属性是flex-grow,flew-shrink和flex-basis的简写。默认值为0 1 auto
align-self 允许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto,表示继承父元素的align-items属性,如果不存在父元素,则等同于stretch。可取的值:flex-start | flex-end | center | baseline | stretch;
stretch Flex项目(沿交叉轴方向)占满整个交叉轴
效果演示:http://yunkus.com/demo/flexbox/flex-sub-item.html

Flexbox布局的语法版本

2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;

2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;

2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。

刚开始研究Flex弹性布局时分不清box,flexbox,和flex的区别还以为他们的作用是不一样的,可后来慢慢收集Flex相关资料时才发现原来他们指的都是同一样东西。

兼容性

虽然现在浮动布局还比较流行,但随着浏览器的更新换代,我相信未来将会是Flex布局(弹性布局)的天下。因为Flex确实给我们带来了不少的方便,甚至有些效果与传统的布局方式相比,用弹性布局实现起来要简单得多。

更新于:7:42 2017/5/3

新旧版对应属性列表

Flex容器

新版属性 旧版属性 作用
display:flex display:box (实践使用时需要加前缀-webkit-)| display:inline-box 启用弹性盒子布局
flex-direction:row / column -webkit-box-orient:horizontal | vertical 定义盒子模型的主轴方向
flex-direction:row-reverse / column-reverse -webkit-box-direction:normal / reverse 定义例子模型里的元素排列顺序(正序、反顺)
justify-content:flex-start / flex-end / center / space-between / space-around -webkit-box-pack:start / end /center / justify 定义盒子内元素在主轴方向上的对齐方式
align-items:flex-start / flex-end / center / baseline -webkit-box-align:start / end / center 定义项目在交叉轴上的对齐方式

Flex 项目

flex-grow:1 -webkit-box-flex:1 剩余空间分配比例
flex:order -webkit-box-ordinal-group 元素具体位置设置(新版的值可以是正数负数和零| 旧版的同上,但是当有零或者有负数时,默认会当作 1 来处理)

相关资料

http://www.w3.org/TR/css3-flexbox/

http://yunkus.com/flex-layout-compatibility-writing-summary/

更新于:14:06 2017/3/9

弹性布局实战篇

介绍完了 flex,现在是实战了。

先来个最简单的布局,项目排列。

HTML代码

<div class="f1">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS代码

<style>
.f1{
    display: flex;
    flex-wrap: wrap;

}
.f1 .item{
    width: 100px;
    height: 100px;
    background: #ddd;
    margin-right: 20px;
    margin-bottom: 20px;
}
</style>

效果图如下:

如果你给样式类 .item 添加flex-grow:1;即

.f1 .item{
    width: 100px;
    height: 100px;
    flex-grow: 1;
    background: #ddd;
    margin-right: 20px;
    margin-bottom: 20px;
}

效果是这样:

flex-grow:1;把剩余空间平均分。比如上面的这个例子,因为已经设置了每个项目的宽度为100px,假设一行内可以容下 3.5 项目个,那么浏览器会一行排三个,第四个别起一行,并且前排的三个会平均分了那0.5个项目的宽度,所以前排的三个项目实际的宽度是大于 100px 的。

下面来一个比较复杂实用的布局

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex 布局实战-云库网</title>
<meta name="description" content="Flex 布局" />
<meta name="keywords" content="Flex 布局" />
<!-- 本例子样式代码在这里 -->
<style>
*{
  padding: 0;
  margin: 0;
  border: none;
}
.wrap{
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.header ,.footer{
  min-height: 58px;
  max-height: 58px;
  height: 58px;
  background: #ddd;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  width: 100%;
  display: flex;
  flex: 1;
  margin: 28px 0;
}
.main{
  overflow-y: scroll;
  flex:1;
  margin: 0 28px;
  padding-right: 28px;
}
.side-left,.side-right{
  width: 200px;
  background: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<!-- 本例子样式代码在这里END -->
</head>
<body>
<div class="wrap">
    <div class="header">header-bar</div>
    <div class="container">
        <div class="side-left">side-left</div>
        <div class="main">
            <!--这里放内容-->
        </div>
        <div class="side-right">side-right</div>
    </div>
    <div class="footer">footer-bar</div>
</div>
</body>
</html>

这个例子可以解决的需求:上下导航有左右区块固定,只有中间内容可以滚动浏览页面。如果内容不足以铺满页面,底部的 footer-bar 也依然会贴在浏览器底部。

如下图:

Flex 布局实战教程

效果演示:http://yunkus.com/demo/flexbox/index.html

在这个例子中,需要注意的几行代码:

提示

min-height: 100vh;
这就间解决内容不足是底部依然贴在底部的关键

max-height: 100vh;
上下导航固守在浏览器窗口关键代码

flex-direction: column;
这个是配置上面的两个属性使用的。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/css3-flexbox-usage/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END