CSS 弹性容器
该文章为英文原文译文及一些自己的拙见
墙裂推荐读原文
浏览原文请戳这里 : 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-direction
和flex-wrap
的简写整合版。CSS
.container{
flex-flow: row-reverse wrap;
}
.container{
flex-direction: row-reverse;
flex-wrap: nowrap;
}
// 两者写法效果等同
默认值为两者的默认值,即 row nowrapjustify-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 弹性容器的更多相关文章
- css弹性盒子学习
css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- CSS弹性(flexible)盒子
弹性盒子 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 弹性容器通过display:flex | inline-flex将其定义为弹性容器 ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- 潜入FLEXBOX——CSS弹性布局
介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...
- 阿里云弹性容器实例产品 ECI ——云原生时代的基础设施
阿里云弹性容器实例产品 ECI ——云原生时代的基础设施 1. 什么是 ECI 弹性容器实例 ECI (Elastic Container Instance) 是阿里云在云原生时代为用户提供的基础计算 ...
- 快速使用CSS 弹性盒子
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...
- 阿里云宣布进入 Serverless 容器时代,推出弹性容器实例服务 ECI
摘要: 阿里云宣布弹性容器实例 ECI(Elastic Container Instance)正式商业化. 为了应对业务高峰,打算提前多久执行ECS扩展?买了ECS虚拟机,容器规格不能完美装箱怎么办? ...
随机推荐
- 学习笔记7-Android短信发送器
新建一个Android项目sns. 在String.xml添加文字 <resources> <stringname="app_name">Sns发送短信&l ...
- Mysql SQL Mode详解
Mysql SQL Mode简介 MySQL服务器能够工作在不同的SQL模式下,并能针对不同的客户端以不同的方式应用这些模式.这样,应用程序就能对服务器操作进行量身定制以满足自己的需求.这类模式定义了 ...
- Xcode中Groups和Folder的区别
以前一直没有在意这个问题,今天"中奖"了 ;( 在Xcode文件夹视图中会发现2种颜色的文件夹图标:黄色和蓝色. 黄色表示组(groups),蓝色表示文件夹(folder). 组只 ...
- 【Vbox】centos虚拟机安装usb网卡驱动
前面安装增强pack之后 usb设备是可以识别了,但是无法正常使用,应该是无线网卡驱动没有的原因. 查看usb设备 os:centos6.6 内核:2.6.32-504.el6.x86_64 [roo ...
- Torch的安装和学习
Long long ago, 就已经安装好Torch,这里再记录一下.Torch是Facebook开发的用于AI的科学计算框架,可广泛运用于机器学习的很多算法.相比Caffe,其接口运用更加方便,使用 ...
- Gradle 1.12翻译——第十九章. Gradle 守护进程
有关其他已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或访问:http://gradledoc.qiniudn.com ...
- 多态 OC——第十天
1.多态 父类指针指向子类对象 没有继承就没有多态 联系前面知识才能清楚什么是多态,所以放到最后面总结小知识点,有前面的知识会对多态更好的了解,会觉得简单很多,但是看此篇博文需要 ...
- java实现http的post和get
前话说一句:conn.setDefaultRequestProperty(key, value);这个函数是设置属性的,其实可以没有! 自己写了一个简单的get,容易控制 public stati ...
- 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发 ...
- (二)plist的使用和序列帧动画
六.plist的使用方法: iOS的程序在安装在手机上以后会把全部资源文件集成在一个文件夹中,这种文件集合称为bundle,对于一般的工程,只有一个bundle,即mainbundle,因此可以通过b ...