css3 flexbox layout(弹性布局)完全解析

栏目: CSS · 发布时间: 6年前

内容简介:css3 flexbox layout(弹性布局)完全解析

参考文章:

flexbox 完全指导

w3c规范

一、背景

Flextbox Layout (弹性盒布局或伸缩盒布局),提供了一种更加有效的方式去布局、对齐和给容器中的子元素分配空间,即使他们的尺寸未知或者是动态改变的。 看看里面有个 flex 就能想象出来。

Flexbox layout 背后的设计理念:赋予容器去改变他的子元素的宽、高、排列顺序的能力,从而可以更好的填充可用空间,尤其对各种各样的设备和屏幕尺寸提供了便利的方式去布局。一个具有flex特性的容器可以去拉伸他的子元素去填充可用的自由空间,也可以收缩他的子元素防止溢出。

​ 更重要的一点, flextbox layout 的布局方向也是不固定的。这点与我们以前的布局是不同的。比如: block 是垂直布局的,而 inline 是水平布局的。 对那些可以工作良好的页面来说,他们在支持庞大或者复杂的应用方面缺乏灵活性。尤其当面对设备的方向、尺寸、缩放等等方面发生改变的时候,这种缺点更加明显。

二、基本知识

flexbox 是一个完整的模块,而不是一个单一的属性。

flexbox 加入了大量的属性。这些属性一部分用在容器上(父元素,一般称之为 flex container ),而另外的一些是用在子元素上(一般称之为 flex items . 弹性项目)。

下面介绍一些基本概念:

这张图来自w3c规范。

css3 flexbox layout(弹性布局)完全解析

一般情况下, flex itmes 要么沿着 main axis 布局(从主轴起点到主轴重点),要么沿着 cross axis 布局(从侧轴起点到侧轴重点)。

  • 主轴(main axis) : 弹性容器的主轴是最主要的轴,flex items会沿着这条轴被布局。有一点需要注意:主轴不一定总是水平的,他的方向由 flex-direction 属性的值来决定。(后面后细讲)
  • 主轴起点(main start)和主轴终点(main end) :弹性容器中的 flex items 会从 主轴起点 开始 到主轴重点结束 布局。
  • 主轴长度(main size) :flex item的宽或高就是主轴长度。到底是宽还是高,由谁沿着主轴的方向来决定。
  • 侧轴(cross axis) :垂直于主轴的轴就是侧轴。侧轴的方向由主轴来决定。
  • 侧轴起点(cross start )和侧轴终点(cross end) :弹性行(flex lines)从侧轴起点开始到侧轴重点结束。
  • 侧轴长度(cross size) :伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「 width 」或「 height 」属性,由哪一个沿着着侧轴方向决定。

三、flex container的属性

css3 flexbox layout(弹性布局)完全解析

3.1 display

​ 这个属性把一个元素定义成为 flex container。可以设置为 flexinline-flex 。设置为 flex 容器就是块级容器,设置为 inline-flex 就是行内元素。 这个容器就会成为他们的直接子元素的 flex context

.container {
    display: flex; /* or inline-flex */
}

3.2 flex-direction

​ 这个属性创建主轴,定义了 flex items 在弹性容器中布局的方向。主轴要么水平方向,要么垂直方向。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row : 主轴水平,方向从左向右。 (默认值)
  • row-reverse:主轴水平,方向从右向左
  • column : 主轴垂直,方向从上向下
  • column-reverse:主轴垂直,方向从下向上

css3 flexbox layout(弹性布局)完全解析

3.3 flex-wrap

​ 默认情况下,所有的 flex items 都会试图在一行。通过修改这个属性的值,可以让 flex items 按照要求多行排列。其实这个属性可以定义 flex items 在侧轴方向的 排序 方式。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap :所有的 flex items 在一行。 (默认值)
  • wrap :允许 flex items 自动换行在多行,方向是从上向下。
  • wrap-reverse : 允许 flex items 自动换行在多行,方向是从下向上。

html:

<div class='container'>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

css:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 700px;
  height: 500px;
  background-color: gray;
  flex-direction: row;
  flex-wrap: nowrap;
}
p{
  width : 200px;
  height : 200px;
  background-color : pink;
}
p:nth-child(2n){
  background-color: cornflowerblue;
}

效果1:

css3 flexbox layout(弹性布局)完全解析

效果2:

css3 flexbox layout(弹性布局)完全解析

效果3:

css3 flexbox layout(弹性布局)完全解析

效果4:

css3 flexbox layout(弹性布局)完全解析

效果5:

css3 flexbox layout(弹性布局)完全解析

效果6:

css3 flexbox layout(弹性布局)完全解析

3.4 flex-flow

flex-flowflex-directionflex-wrap 两个属性的合并简写方式。一次性的定义了主轴和侧轴,他的默认值是: row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

3.5 justify-content

​ 该属性定义了主轴方向 flex items 的对齐方式。也能把多余的自由空间,分配给 flex-items

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start: flex-items 从主轴起点开始排列。

css3 flexbox layout(弹性布局)完全解析

  • flex-end: flex-items 从主轴终点开始排列。

css3 flexbox layout(弹性布局)完全解析

  • center: flex-items 在主轴方向居中排列。

css3 flexbox layout(弹性布局)完全解析

  • space-between:把 free space 平局分布在 flex-items 之间。第一个 item紧挨着主轴起点,最后一个item紧挨着主轴终点。

css3 flexbox layout(弹性布局)完全解析

  • space-around:把 free space 平均分布在每个item的周围。所以中间空白会比边上的空白大一倍。

    css3 flexbox layout(弹性布局)完全解析

3.6 align-items

​ 该属性定义了 flex-items 在侧轴上的对齐方式。可以看成是 justify-content 在侧轴上的版本。

如果是单行 flex-items 的情况使用比较好

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:从侧轴起点开始排列
  • flex-end:从侧轴的终点开始排列
  • center:沿着侧轴方向居中
  • baseline:沿着内容的基线对齐
  • stretch:在侧轴方向拉伸 flex-items(默认值) 。但是他的优先级比设定了具体的 heigthmax-height 低,但是比auto高。

css3 flexbox layout(弹性布局)完全解析

3.7 align-content

​ 该属性定义了当有多行 flex items 时, free-space 如何分布,类似于主轴的 justify-content

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:从侧轴起点开始排列
  • flex-end:从侧轴的终点开始排列
  • center:沿着侧轴方向居中
  • stretch:在侧轴方向拉伸 flex-items(默认值) 。但是他的优先级比设定了具体的 heigthmax-height 低,但是比auto高。
  • space-between:把 free space 平局分布在 flex-items 之间。第一个 item紧挨着侧轴起点,最后一个item紧挨着侧轴终点。
  • space-around:把 free space 平均分布在每个item的周围。所以中间空白会比边上的空白大一倍。

css3 flexbox layout(弹性布局)完全解析

四、flex-items的属性

css3 flexbox layout(弹性布局)完全解析

4.1 order

​ 默认情况下, flex-items 安装源码的属性布局。然后,通过 order 属性可以改变他们在弹性容器中的出现的顺序。

.item {
    order: <integer>;
}

order 的默认默认值是 0 。值越大,布局越靠后; 反之,越小,布局越靠前。

.child:nth-child(2){
    order: 2;
}
.child:nth-child(3){
    order: 1;
}

css3 flexbox layout(弹性布局)完全解析

4.2 flex-grow

​ 该属性设置 flex-item 在主轴方向,有空余空间的时候可以占据空余空间。他的值是一个没有单位的值,表示占据空余空间的比例。

默认值是 0 。负值无效

.item {
    flex-grow: <number>; /* default 0 */
}

比如:

  1. 如果有2个item都设置为 1, 则他们会把剩余的平分, 因为分别是: 1 / (1 + 1) * 剩余空间、1 / (1 + 1) * 剩余空间

  2. 如果3个item 分别设置为 2、1、3 。则他们分别分的剩余空间的 2 / (2 + 1 + 3) * 剩余空间、1 / (2 + 1 + 3)* 剩余空间、3 / (2 + 1 + 3)* 剩余空间

总结: flex-grow / 所有的flex-grow只和 * 剩余空间

.item:nth-child(1){
    flex-grow: 1;
}
.item:nth-child(2){
    flex-grow: 1;
}

css3 flexbox layout(弹性布局)完全解析

.item:nth-child(1){
    flex-grow: 1;
}
.item:nth-child(3){
    flex-grow: 2;
}

css3 flexbox layout(弹性布局)完全解析

4.3 flex-shrink

​ 该属性让 flex-item 具有收缩的功能。当一行放不下,并且不允许换行的时候,允许 flex-item收缩。

​ 值是一个整数,来表示收缩比率。默认值是1。 如果是0表示不允许收缩。

​ 一行放不下的时候,其实表示的是剩余空间为负,计算方法同 flex-grow是一样的,只是现在是减去响应的值而已(加负)

.container{
  height : 200px;
  width: 600px;
  background-color : gray;
  display: flex;
}
.item{
    height:100px;
    width: 300px;
    background-color: pink;
    margin: 50px 0 0 0px;

    font-size: 60px;
    text-align: center;
    line-height: 100px;
}
.item:nth-child(2n){
    background-color: cornflowerblue;
}
.item:nth-child(1){
    flex-shrink: 2;
}
.item:nth-child(3){
    flex-shrink: 3;
}

计算:

剩余空间: 600 - 3 * 300 = -300

剩余空间每份: -300 / (2 + 1 + 3) = -50

item1宽度: 300 - 50 * 2 = 200

item1宽度: 300 - 50 * 1 = 250

item1宽度: 300 - 50 * 3 = 150

css3 flexbox layout(弹性布局)完全解析

4.4 flex-basis

​ 这个属性指定在剩余空间分配之前, flex-item 的尺寸。

.item {
    flex-basis: <length> | auto; /* default auto */
}
  • 可以指定具体的长度 px、em、百分比
  • auto:意思是参考这个item的宽或高。 默认值是auto
.container{
    width: 900px;
    display: flex;
}
.item{
  width: 200px;
  background-color: pink;
}
.item:nth-child(1){
  flex-grow: 1;
  flex-basis: auto;  // 
}
.item:nth-child(3){
  flex-grow: 1;
  flex-basis: 60px;  // 
}

剩余空间: 900 - 200 - 200 - 60 = 440

item1 : 200 + 220 = 420

item2:200

item3:60 + 220 = 280

css3 flexbox layout(弹性布局)完全解析

4.5 flex

​ 是 flex-grow、flex-shrink、flex-basis 的简写。 flex-shrink、flex-basis 这2个参数是可选的。 默认值是: 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

强烈建议使用这个简写的形式来代替3个独立的属性。 简写可以智能设置其他的值。

4.6 align-self

​ 单独的设置某个 item 的对齐方式,来覆盖align-items或align-content。

.container {
    height: 200px;
    width: 900px;
    background-color: gray;
    display: flex;
    align-items: flex-start;
}
.item:nth-child(3) {
  flex-grow: 1;
  flex-basis: 0px;
  align-self: flex-end;
}

css3 flexbox layout(弹性布局)完全解析


以上所述就是小编给大家介绍的《css3 flexbox layout(弹性布局)完全解析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

TCP/IP详解 卷1:协议

TCP/IP详解 卷1:协议

W.Richard Stevens / 范建华 / 机械工业出版社 / 2000-4-1 / 45.00元

《TCP/IP详解卷1:协议》是一本完整而详细的TCP/IP协议指南。描述了属于每一层的各个协议以及它们如何在不同操作系统中运行。作者W.Richard Stevens用Lawrence Berkeley实验室的tcpdump程序来捕获不同操作系统和TCP/IP实现之间传输的不同分组。对tcpdump输出的研究可以帮助理解不同协议如何工作。 《TCP/IP详解卷1:协议》适合作为计算机专业学......一起来看看 《TCP/IP详解 卷1:协议》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试