一、flex布局教程:语法篇
.box{ display: flex; }
.box{ display: inline-flex; }
.box{ display: -webkit-flex; /* Safari */ display: flex; }
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
.box { flex-direction: row | row-reverse | column | column-reverse; }
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
.box { flex-flow: <flex-direction> || <flex-wrap>; }
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
.item { order: <integer>; }
.item { flex-shrink: <number>; /* default 1 */ }
.item { flex-basis: <length> | auto; /* default auto */ }
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
一、flex布局教程:语法篇的更多相关文章
- Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊布局非常不方便,比如, ...
- CSS之Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...
- Flex 布局教程:语法篇 【转】
Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网 ...
- Flex 布局教程:实例篇(转)
你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...
- CSS学习笔记(12)--Flex 布局教程:实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
- 二、Flex 布局教程:实例篇
注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解 ...
- Flex 布局教程:语法和实例
语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...
- Flex 布局教程:实例篇【转】
Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...
- css总结2:Flex 布局教程:Flex 语法(转)
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
随机推荐
- [转] Gitlab 8.x runner安装与配置
[From]http://muchstudy.com/2018/07/13/Gitlab-8-x-runner%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE ...
- Oracle递归查询(start with…connect by prior)
查询基本结构: select … from table_name start with 条件1 connect by 条件2 1.建测试用表 create table test ...
- Zookeeper概念学习系列之分布式事务
不多说,直接上干货! 初学者来说,肯定会有这么一个疑问.为什么会在zookeeper里牵扯到分布式事务? zookeeper到底是什么? zookeeper实际上是yahoo开发的,用于分布式中一致性 ...
- Struts2 入门介绍(一)
一.什么是Struts2 1.Struts2是一个开发框架,应用于JavaEE三层架构中的web层. 2.Struts2框架是在Struts1和webwork基础上发展的一个全新的框架. 3.Stru ...
- 忘记root密码的解决方法——进入单用户模式修改
(1)在系统还在读秒的时候按任意键,你会看到如下界面: 然后按下‘e’
- C运算符总结
算术运算符 加减 + - 自左向右 +-同级 乘除取模 * % / 自左向右 高于+ - 自加自减 ++ -- 右结合性 高于基本算术运算符 正负 -+ 自右向左 跟++ --同级 赋值运算符 赋值 ...
- 在web应用中使用文件
使用HTML5 DOM新增的File API,现在可以让网页要求用户选择本地文件,并且读取这些文件的信息了.选择的方式既可以是HTML<input> 元素,也可以是拖拽 . 你可以在chr ...
- WPF TextBox 聚焦
1.利用行为 http://blog.csdn.net/lianchangshuai/article/details/9223125 2. 利用装饰器 http://stackoverflow.com ...
- ASP.NET MVC4 新手入门教程之二 ---2.添加控制器
MVC 代表 模型-视图-控制器.MVC 是一个模式用于开发应用程序是很好的架构. 可检验性和易于维护.基于 MVC 的应用程序包含: Models: 类表示应用程序的数据并使用验证逻辑以执行这些数据 ...
- Azure 项目构建 – 部署高可用的 Python Web 应用
Python 以其优美,清晰,简单的特性在全世界广泛流行,成为最主流的编程语言之一.Azure 平台针对 Python 提供了非常完备的支持.本项目中,您将了解如何构造和部署基于 Azure Web ...