HTMLCSS布局Flex 布局
Flex是Flexible Box的缩写,意为"弹性布局用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局
Webkit 内核的浏览器，必须加上-webkit前缀
设为Flex布局以后，子元素的f1oat、 clear和vertical-align属性将失效
基本概念
采用Flex布局的元素，称为Flex容器(flex container)，简称"容器"
它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。
容器的属性
flex-direction 决定主轴的方向(水平或垂直)
| 语法 | 值 |
|---|
| flex-direction | row：主轴为水平方向，起点在左端(默认)【左到右】 |
| | row-reverse：主轴为水平方向,起点在右端【右到左】 |
| | column：主轴为垂直方向,起点在上沿【上到下】 |
| | column-reverse：主轴为垂直方向，对齐方式与column相反【反转下到上】 |
flex-wrap 默认情况，所有项目，会在一 行显示，如需要换行，可添加flex-wrap
| 语法 | 值 |
|---|
| flex-wrap | nowrap: 不换行(默认)【单行】 |
| | wrap: 换行，第1行在上方【换行排列】 |
| | wrap-reverse: 反转 wrap 排列【颠倒换行】 |
flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式
| 语法 | 值 |
|---|
| flex-flow | row nowrap：水平排列，不换行(默认) |
| | row wrap：水平排列，换行 |
| | column wrap：垂直排列,换行 |
justify-content 项目在主轴.上的对齐方式(根据 flex-direction决定是否为主轴)
| 语法 | 值 |
|---|
| justify-content | flex-start【居左】 |
| | flex-end 【居右】 |
| | center 【居中】 |
| | space-between 容器首尾不留距离【平均分布】 |
| | space-around 容器首尾留有距离【平均分布】 |
align-items 适用于不换行的情况
| 语法 | 值 |
|---|
| 用途 | 单行控制 |
| align-items | flex-start 项目顶部对齐(有高度时的默认)【顶部对齐】 |
| | flex-end 项目尾部对齐【底部对齐】 |
| | center 项目居中对齐【居中对齐】 |
| | baseline 项目的第一行文字的基线对齐 |
| | stretch 设置高度或设为auto,拉伸与容器同高(默认)【拉伸】 |
allign-content (多行情况时使用) 项目在交叉轴(侧轴)上如何对齐
| 语法 | 值 |
|---|
| 用途 | 多行控制 |
| align-content | flex-start 侧轴起点对齐 |
| | flex-end 侧轴终点对齐 |
| | center 侧轴居中对齐 |
| | space-between 两端对齐，容器首尾不留距离 |
| | space-around 相当两端对齐，容器首尾留有距离 |
| | stretch (默认) |
项目的属性
order 项目的排列顺序，数值越小，排列越靠前，默认为0
| 语法 | 值 |
|---|
| 用途 | 控制项目排列顺序 |
| 用法 | css选中元素设置order参数 |
| order | 0【默认】保持项目原来的位置 |
| | -1 位置为第1排在所有项目前面 |
| | 1 位置为最后排在所有项目末尾 |
flex-grow (扩大) ：定义项目的放大比例，元素填充容器的功能
| 语法 | 值 |
|---|
| 用法 | css选中多个或单个元素，控制怎么填充容器 |
| flex-grow | 0：如容器存在剩余空间,保持原大小 |
| | 1：项目平均分配剩余间(所有项目宽度一样)【平均分配】 |
| | 2：某个项目flex-grow属性为2,其他项目都为1,那么为2的项目宽度是为1的2倍 |
flex-shrink (缩小) :定义项目的缩小比例
| 语法 | 值 |
|---|
| 用法 | 控制容器空间分配，缩小与不缩小 |
| flex-shrink | 1：属性都为1,当容器空间不足时,所有项目等比例缩小(默认) |
| | 0：其他项目都为1,当窗口空间不足时,为0的项目不缩小 |
flex-basis 分配多余空间之前，项目占据的主轴空间的大小
| 语法 | 值 |
|---|
| 用法 | css选中元素控制它们的大小 |
| flex-basis | auto |
| | flex-basis :50px |
| | flex-basis :50% |
flex flex-grow，flex-shrink ，flex-basis 的简写
| 语法 | 值 |
|---|
| 用法 | flex:1 |
| flex | flex:1，相当于，只设置了 flex-grow |
| | 默认值为 0 1 auto.后两个属性可选 |
| | 该属性有两个快捷值: auto (1 1 auto)和none(0 0 auto) |
| | 建议优先使用这个属性,而不是单独写三个分离的属性，因为浏览器会推算相关值。 |
align-se1f 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
| 语法 | 值 |
|---|
| align-se1f | 默认值为auto 表示继承父元素的align-items属性,如果没有父元素，则等同于stretch |
| | 该属性可能取6个值，除了auto,其他都与align-items属性完全一 致 |
| | 属性值: auto ， flex-start ， flex-end，center ， baseline ，stretch |
爱笔记