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虚拟机,容器规格不能完美装箱怎么办? ...
随机推荐
- Linux下使用gcc编程初体验
近期刚刚放弃了Windows,投入了Ubuntu 的怀抱.今天就拿一个小小的案例来做一下C语言的编译和运行流程.额,顺便说一句.本文适合那些Linux新手,不适合老鸟哈. 看完本文可以学到什么? 程序 ...
- iOS中 本地通知/本地通知详解 韩俊强的博客
布局如下:(重点讲本地通知) iOS开发者交流QQ群: 446310206 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 Notification是智能手机应用编 ...
- linq---我为你提笔序,你的美不只查询语句
LinQ百度百科对她这样解释,是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作内存数据. LINQ是Language Int ...
- (NO.00004)iOS实现打砖块游戏(二):实现游戏主界面动画
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是 ...
- 【unix网络编程第三版】阅读笔记(三):基本套接字编程
unp第三章主要介绍了基本套接字编程函数.主要有:socket(),bind(),connect(),accept(),listen()等. 本博文也直接进入正题,对这几个函数进行剖析和讲解. 1. ...
- iOS中 UIMPMediaPickerController播放系统音乐
布局如下: 引入框架: #import <AVFoundation/AVFoundation.h> #import <MediaPlayer/MediaPlayer.h> 遵循 ...
- Mac 下 Chrome多个Tab之间切换
下一个Tab: Control + Tab前一个Tab: Control + Shift + Tab记录一下备忘.
- python类定义
在我的收藏中有一篇特别详细的类讲解 此处部分内容引自:http://blog.sina.com.cn/s/blog_59b6af690101bfem.html class myclass: 'this ...
- 比较ArrayList、LinkedList、Vector
翻译人员: 铁锚 翻译时间: 2013年12月2日 原文链接: ArrayList vs. LinkedList vs. Vector 1. List概述 List,就如图名字所示一样,是元素的有序列 ...
- Linux Shell 命令--grep
从这篇开始,是文本内容操作,区别于文本操作. shell,perl,python,一直都是文本操作的专家语言,而我们今后学习的的将是shell的噱头--文本操作.下面提到最常见的一个: grep 这算 ...