该文章为英文原文译文及一些自己的拙见
墙裂推荐读原文
浏览原文请戳这里 : 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. Linux下使用gcc编程初体验

    近期刚刚放弃了Windows,投入了Ubuntu 的怀抱.今天就拿一个小小的案例来做一下C语言的编译和运行流程.额,顺便说一句.本文适合那些Linux新手,不适合老鸟哈. 看完本文可以学到什么? 程序 ...

  2. iOS中 本地通知/本地通知详解 韩俊强的博客

    布局如下:(重点讲本地通知) iOS开发者交流QQ群: 446310206 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 Notification是智能手机应用编 ...

  3. linq---我为你提笔序,你的美不只查询语句

    LinQ百度百科对她这样解释,是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作内存数据. LINQ是Language Int ...

  4. (NO.00004)iOS实现打砖块游戏(二):实现游戏主界面动画

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是 ...

  5. 【unix网络编程第三版】阅读笔记(三):基本套接字编程

    unp第三章主要介绍了基本套接字编程函数.主要有:socket(),bind(),connect(),accept(),listen()等. 本博文也直接进入正题,对这几个函数进行剖析和讲解. 1. ...

  6. iOS中 UIMPMediaPickerController播放系统音乐

    布局如下: 引入框架: #import <AVFoundation/AVFoundation.h> #import <MediaPlayer/MediaPlayer.h> 遵循 ...

  7. Mac 下 Chrome多个Tab之间切换

    下一个Tab: Control + Tab前一个Tab: Control + Shift + Tab记录一下备忘.

  8. python类定义

    在我的收藏中有一篇特别详细的类讲解 此处部分内容引自:http://blog.sina.com.cn/s/blog_59b6af690101bfem.html class myclass: 'this ...

  9. 比较ArrayList、LinkedList、Vector

    翻译人员: 铁锚 翻译时间: 2013年12月2日 原文链接: ArrayList vs. LinkedList vs. Vector 1. List概述 List,就如图名字所示一样,是元素的有序列 ...

  10. Linux Shell 命令--grep

    从这篇开始,是文本内容操作,区别于文本操作. shell,perl,python,一直都是文本操作的专家语言,而我们今后学习的的将是shell的噱头--文本操作.下面提到最常见的一个: grep 这算 ...