这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
Title/CSS Flex布局完全指南 #flight.Archives002
序(from Ruanyf) :
网页布局（layout）是 CSS 的一个重点应用.
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性. 它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现
2009年，W3C 提出了一种新的方案 - Flex 布局，可以简便、完整、响应式地实现各种页面布局.
Tag/Flex介绍
.container{
display:flex; /*or inline-flex*/
}
设置了.container元素为Flex容器(Flex container),.container的直接子元素被称为Flex项目(Flex item)
Flex元素按照主轴(main-axis)的方向排列,交叉轴(cross-axis)与主轴垂直
主轴的开始和结束被称为 main start 和 main end
交叉轴的开始和结束被称为 cross start 和 cross end
Tag/容器(flex container)属性
| 属性 | 可取值 | 说明 |
|---|---|---|
display | flex,inline-flex | 指定一个容器是否启用Flex布局 |
flex-direction | row,row-reverse,column,column-reverse | 指定主轴(main-axis)的方向 |
flex-wrap | nowrap,wrap,wrap-reverse | 指定内容超出一行情况的换行方式 |
flex-flow | <flex-direction> <flex-wrap> | CSS简写属性 |
justify-content | flex-start,flex-end,center,space-between,space-around | 指定项目在主轴(main-axis)上的对齐方式 |
align-items | flex-start,flex-end,center,baseline,stretch | 指定项目在交叉轴(cross-axis)上的对齐方式 |
align-content | flex-start,flex-end,center,space-between,space-around,stretch | 同时指定项目在两根轴线上的对齐方式(如果项目只有一根轴线.该属性不起作用) |
Tag/项目(flex item)属性
| 属性 | 可取值 | 说明 |
|---|---|---|
order | <number> | 指定项目的排列顺序,默认值为0,order相同时按照项目在DOM中的顺序排序 |
flex-grow | <number> | 指定项目大小的比例,默认值为0,width属性会优先指定flex-item的最小大小 |
flex-shrink | <number> | 指定项目大小在单行空间不足时的收缩比例,默认值为1 |
flex-basis | <length> | 指定项目在主轴方向上的初始大小 |
flex | <'flex-grow'> <'flex-shrink'> <'flex-basis'> | CSS简写属性 |
align-self | auto,flex-start,flex-end,center,baseline,stretch | 指定单个元素的对齐方式,优先级高于align-items属性 |
->> Details
项目属性 - Flex 属性可取值详细介绍 (from MDN)
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值, 无单位数字: flex-grow */
flex: 2;
/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值: flex-grow | flex-basis */
flex: 1 30px;
/* 两个值: flex-grow | flex-shrink */
flex: 2 2;
/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;
->> See also
Flex Bugs github.com/philipwalto…
Flexbox Properties Demonstration codepen.io/justd/full/…
Ruanyf#Flex布局的Demo www.ruanyifeng.com/blog/2015/0…
Ruanyf#Flex布局表单的实现 www.ruanyifeng.com/blog/2018/1…
->> Reference link
MDN中文文档 developer.mozilla.org/zh-CN/docs/…
MDN 英文文档 developer.mozilla.org/en-US/docs/…
CodingStartUp www.bilibili.com/video/BV1qJ…
CSS-Tricks css-tricks.com/snippets/cs…
Scotch.io scotch.io/tutorials/a…
->> Version History
现在版本为V1.0 详见 Github(@flightmakers)
8.11 发布V1.0
8.13 修改一些表述,增加了几个Ruanyf的链接