该文章为英文原文译文及一些自己的拙见
墙裂推荐读原文
浏览原文请戳这里 : CSS-STRICKS

弹性布局 (Flexbox Layout)

什么是弹性布局

Flexbox Layout 模块旨在提供一种更为有效的方式来对容器(container)中的每一项(item)进行布置、对齐和空间分配,即使是在其尺寸未知或动态变化的情况下也能很好的发挥作用。

弹性布局的主要思想是赋予容器(container)改变内部每一项的长宽来更好的适应各种尺寸的屏幕(手机、平板或是台式显示器)。一个设置了flex属性的容器(container)可以对其内部的项(item)进行扩大来更好填充可用空间,或是缩小防止溢出。

重要的是,一般布局指基于垂直的块元素(block)和基于水平的行内元素(inline),弹性布局与一般布局不同的是它与方向无关。虽然一般布局也能很好地规划页面,但它缺乏在页面或元素发生旋转、改变大小时的灵活性。

容器和内部项的属性

弹性布局实为一种模型而非一个属性,其中包含了容器的属性和容器中每一项的属性。

下图阐释了弹性布局的主要思想

在弹性布局中,容器内部的项(item)的布置方式基于主轴(main axis)或是交叉轴(cross axis)其中之一。

名称 备注
主轴(main axis) 主轴是内部项在布局是最主要遵循的轴,不一定是水平方向,其方向基于属性flex-direction的值
主轴起始点(main start) 在容器内布局的项从起始点开始
主轴结束点(main end) 截止到结束点
主轴尺寸(main size) 如图
交叉轴(cross axis) 始终保持与主轴垂直,即不一定是竖直方向
   
   
   

||

||

||

  • 交叉轴起始点(cross start) |内部项在交叉轴上排列的起点|

交叉轴结束点(cross end) |和终点|

交叉轴尺寸(cross size) |如图|

弹性布局的属性

弹性布局的属性分为容器的属性,和其内部每一项的属性。

容器的属性
在想要使用弹性布局的元素上加上如下代码

CSS
.container{
display: flex; /* 或者 inline-flex */
}

  • flex-direction

    CSS
    .container {
    flex-direction: row | row-reverse | column | column-reverse;
    }

    即内部项的排列方向,flex-direction 设置为 row-reverse 则会从一行的靠右边开始布置,而非是靠左布置。

值 |解释|
-------- |--------|
row(默认) |在设置了direction:ltr的元素上从左到右排列,在设置了direction:rtl元素上从右到左排列|
row-reverse |在设置了direction:ltr的元素上从右到左排列,在设置了direction:rtl元素上从左到右排列|
column |和row相同,但从上到下|
column-reverse |和row-reverse相同,但从下到上|

  • flex-wrap

    `CSS
    .container{
    flex-wrap: nowrap | wrap | wrap-reverse;
    }

    `

    内部项的换行方式。

值 |解释|

-------- |--------|

nowrap(默认) |所有项目排成一行,不换行|
wrap |换行,从上向下排|
wrap-reverse |换行,从下向上排|

  • flex-flow

    CSS
    .container{
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
    }

    属性flex-directionflex-wrap的简写整合版。

    CSS
    .container{
    flex-flow: row-reverse wrap;
    }
    .container{
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    }
    // 两者写法效果等同

    默认值为两者的默认值,即 row nowrap

  • justify-content

    CSS
    .container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    }

    内部项在沿着主轴方向上的对齐方式和间距。

  • align-items

    CSS
    .container {
    align-items: flex-start | flex-end | center | baseline | stretch;
    }

    内部项在沿着交叉轴方向上的对齐方式。

  • align-content

    CSS
    .container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    该属性定义了多行情况下,沿交叉轴方向有剩余空间时,各行空间的分配情况,就如同竖直版的justify-content属性。

内部项的属性

to be continue

CSS 弹性容器的更多相关文章

  1. css弹性盒子学习

    css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...

  2. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  3. CSS弹性(flexible)盒子

    弹性盒子         弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 弹性容器通过display:flex | inline-flex将其定义为弹性容器 ...

  4. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  5. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  6. 潜入FLEXBOX——CSS弹性布局

    介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...

  7. 阿里云弹性容器实例产品 ECI ——云原生时代的基础设施

    阿里云弹性容器实例产品 ECI ——云原生时代的基础设施 1. 什么是 ECI 弹性容器实例 ECI (Elastic Container Instance) 是阿里云在云原生时代为用户提供的基础计算 ...

  8. 快速使用CSS 弹性盒子

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...

  9. 阿里云宣布进入 Serverless 容器时代,推出弹性容器实例服务 ECI

    摘要: 阿里云宣布弹性容器实例 ECI(Elastic Container Instance)正式商业化. 为了应对业务高峰,打算提前多久执行ECS扩展?买了ECS虚拟机,容器规格不能完美装箱怎么办? ...

随机推荐

  1. 学习笔记7-Android短信发送器

    新建一个Android项目sns. 在String.xml添加文字 <resources> <stringname="app_name">Sns发送短信&l ...

  2. Mysql SQL Mode详解

    Mysql SQL Mode简介 MySQL服务器能够工作在不同的SQL模式下,并能针对不同的客户端以不同的方式应用这些模式.这样,应用程序就能对服务器操作进行量身定制以满足自己的需求.这类模式定义了 ...

  3. Xcode中Groups和Folder的区别

    以前一直没有在意这个问题,今天"中奖"了 ;( 在Xcode文件夹视图中会发现2种颜色的文件夹图标:黄色和蓝色. 黄色表示组(groups),蓝色表示文件夹(folder). 组只 ...

  4. 【Vbox】centos虚拟机安装usb网卡驱动

    前面安装增强pack之后 usb设备是可以识别了,但是无法正常使用,应该是无线网卡驱动没有的原因. 查看usb设备 os:centos6.6 内核:2.6.32-504.el6.x86_64 [roo ...

  5. Torch的安装和学习

    Long long ago, 就已经安装好Torch,这里再记录一下.Torch是Facebook开发的用于AI的科学计算框架,可广泛运用于机器学习的很多算法.相比Caffe,其接口运用更加方便,使用 ...

  6. Gradle 1.12翻译——第十九章. Gradle 守护进程

    有关其他已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或访问:http://gradledoc.qiniudn.com ...

  7. 多态&nbsp;OC——第十天

    1.多态  父类指针指向子类对象      没有继承就没有多态      联系前面知识才能清楚什么是多态,所以放到最后面总结小知识点,有前面的知识会对多态更好的了解,会觉得简单很多,但是看此篇博文需要 ...

  8. java实现http的post和get

    前话说一句:conn.setDefaultRequestProperty(key, value);这个函数是设置属性的,其实可以没有!   自己写了一个简单的get,容易控制 public stati ...

  9. libgdx 1.4.1发布

    (转载自http://www.libgdx.cn/topic/4/libgdx-1-4-1%E5%8F%91%E5%B8%83) libgdx从未停止进步的脚步.10月10日,libgdx1.4.1发 ...

  10. (二)plist的使用和序列帧动画

    六.plist的使用方法: iOS的程序在安装在手机上以后会把全部资源文件集成在一个文件夹中,这种文件集合称为bundle,对于一般的工程,只有一个bundle,即mainbundle,因此可以通过b ...