CSS布局——Flex布局
来源:互联网 发布:乐视网络电视for mac 编辑:程序博客网 时间:2024/06/14 00:17
本文参考阮一峰大师的一篇文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
(图 待完善)
2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
一、Flex布局语法?
任何一个容器都可以指定为Flex布局。
.box{ display: flex;}
行内元素也可以使用Flex布局。
.box{ display: inline-flex;}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex;}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用Flex布局的元素,称为Flex容器(flex container)。
它的所有子元素自动成为容器成员,称为Flex项目(flex
容器存在两根轴:水平主轴和垂直的交叉轴。
项目默认沿主轴排列。
单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
以下6个属性设置在容器上。
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
1.flex-direction属性
决定主轴的方向(即项目的排列方向):
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。3个值:nowrap(不换行);wrap(换行 第一行在上方);wrap-reverse(换行 第一行在下方)
justify-content属性
定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around;}
align-items属性
定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content属性
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
- CSS布局——Flex布局
- css布局之flex
- css flex布局详解
- FLEX CSS布局
- CSS-flex布局 笔记
- CSS Flex 布局教程
- css实现Flex布局
- 浅谈Flex布局【CSS】
- CSS Flex布局
- 前端面试拾遗——CSS选择器、Flex布局、position
- css的flex box布局
- 详解CSS中flex布局
- css布局之爱上flex
- flex布局兼容性css文件
- css复习及flex布局
- css flex布局学习地址
- CSS笔记(Flex 布局)
- Flex布局——属性
- 线程Thread初识
- [SMOJ1795]打怪兽
- 自定义配置UEditor 工具栏上的按钮列表
- Forbidden:You don't have permission to access / on this server.
- Chinese Girls' Amusement (大数模拟)
- CSS布局——Flex布局
- 一点Scala学习资源
- uva1631 Locker 记忆化搜索
- 【Treap/非旋转Treap】BZOJ3224 [Tyvj1728]普通平衡树
- Vue.js实现checkbox的全选和反选
- 新手开发者求助
- 数据结构(二):线性表的链式存储结构-单链表的实现
- bootstrap走动的进度条
- Choosing an Appropriate Pull-up/Pull-down Resistor for Open Drain Outputshttp://www.ti.com/lit/an/sl