flex容器与项目常用属性
一、笔记
flex:Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
flex布局常用属性，分为容器属性和项目属性：
- 容器元素指的是显性声明
display:flex或display:inline-flex的元素； - 项目元素指的是容器元素的子元素，注意，只是子元素，孙元素及之后的都不是
- 容器元素也可以成为父级容器元素的项目元素，同理，项目元素也可以成为下级元素的容器元素
概念1：主轴：主轴由 flex-direction 定义，交叉轴垂直于它，布局的方向有行和列，例如
flex-direction:row,那么row就是主轴，垂直于row的column就是交叉轴。
概念2：交叉轴：垂直于flex-direction属性值定义的主轴的轴就是交叉轴概念3：起始线、终止线：
start/end。主轴是row的情况下，起始线是容器的最左边，终止线是容器的最右边；主轴是column的情况下，默认，起始线是容器的顶部，终止线是容器的底部。
二、flex布局常用属性-容器属性
1、display
display:flex:块容器dispaly:inline-flex：行内容器
2、flex-direction
- 语法：
flex-direction:row/column/row-reverse/column-reverse - 表示flex容器的排列方向:行/列/行逆序/列逆序
3、flex-wrap
- 语法：
flex:wrap/nowrap - 对于flex容器，项目的子元素总宽度大于容器最大宽度。如果flex-wrap的值设置为wrap，所以项目的子元素换行显示。
重点记忆一：
4、语法糖：flex-flow
- 2和3中的两个属性：
flex-direction和flex-wrap可以由一个属性flex-flow代替 - 例：设置弹性布局的方向为
row，不换行，代码表示为flex-flow:row nowrap;
5、justify-content
- justify-content属性用来设置所有项目元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向
row:无论是否设置宽高，都能看到效果；column：只有设置容器和项目的宽高才能看到效果justify-content:stretch:所有项目元素沿主轴自动拉伸排列justify-content:flex-start:所有项目元素沿主轴起始线排列（默认值）justify-content:flex-end:所有项目元素沿主轴终止排列justify-content:center:所有项目元素排列在主轴中间位置justify-content:space-around:每个项目元素的左右空间相等。justify-content:space-between:项目元素排列好之后的剩余空间拿出来，项目在容器的两端对齐justify-content:evenly:容器的剩余空间平均分配到元素之间，所以所有元素之间间隔相等
6、align-items
align-items属性设置所有项目元素在交叉轴上的对齐方式，其属性值主要有4个。- 这个属性的初始值为stretch，这就是为什么flex 元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满 flex 容器 —— 最高的元素定义了容器的高度。
- 语法：
align-itemes align-items:stretchalign-items:flex-start：（默认值）align-items:flex-endalign-items:center
—- 注意—-
为了与
grid布局同步记忆，我们可以：将上述5中的
justify-content可用place-content来代替；
将上述5中的align-items可用place-items来代替；
—-总结—-
通过以上分析，我们可以将flex布局中主要的容器属性归纳如下
display: 容器类型(块或行内)flex-flow: 主轴方向与是否换行place-content: 项目在”主轴”上的排列方式place-items: 项目在”交叉轴”上的排列方式
三、flex布局常用属性-项目属性
为了更好地控制单个flex项目元素的排列方式，有5个属性可以作用于它们：
1、 flex-grow
- 用来表示项目元素在主轴上有剩余空间时，是否自动增大，以占满剩余空间，（默认0）
2、 flex-shrink
- 用来表示项目元素在主轴空间不不够时候是否自动缩小，以适应容器空间大小，（默认是1）
3、 flex-basis
- 用来表示或计算项目元素的宽高,（默认值是auto）,表示自动，也就是完全根据子列表项自身尺寸渲染。在Flex布局中，flex-basis优先级是比width高的（可以理解为覆盖），渲染的优先级为
min-width > || max-width > width > Content Size.
4、语法糖：flex
- 1\2\3中的三个属性，可以统一由一个属性或简写
flex代替，主要有以下几种形式 - 明确概念：响应指的是项目大小是否自动适应容器大小调整而自动调整大小
flex:0 1 auto默认值,也就是部分响应；flex:1 1 auto完全响应；flex:0 0 auto完全不响应
4、 place-self
- 主要用来设置单个项目元素在交叉轴上的对齐方式
- 主要的值有3个：start、end、center。注意
align-items或place-items是设置全部的，而place-self是局部也就是单个项目元素的设置
5、order
order属性主要用来设置单个项目元素的显示顺序，数值越大越靠后排列；- 值可以是负数。
—-总结—-
**我们可以将flex项目元素的属性概括如下
flex: 项目在”主轴”上的缩放比例与宽度place-self某项目在”交叉轴”上的排列方式order: 项目在”主轴”上的排列顺序
—-实例代码如下—-
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主轴与交叉轴的互换:align-contents与align-items</title><style>.box {display:flex;flex-direction:row-reverse;background-color: lightblue;width:500px;height:300px;/* 1.项目的主轴为row时 *//* flex-flow:row nowrap; *//* 所有项目元素起始线对齐 *//* justify-content:start; *//* 所有项目元素终止线对齐 *//* justify-content:end; *//* 所有项目主轴线中间对齐 *//* justify-content:center; *//* 两端对齐 *//* justify-content:space-between; *//* 每个元素左右分配同样的空间 *//* justify-content:space-around; *//* 每个间距左右空间大小相等，间距相等 *//* justify-content:space-evenly; *//* 2.项目的主轴为column时 */flex-flow:row nowrap;/* 所有项目元素起始线对齐 */justify-content:start;/* 所有项目元素终止线对齐 */justify-content:end;/* 所有项目主轴线中间对齐 */justify-content:center;/* 两端对齐 */justify-content:space-between;/* 每个元素左右分配同样的空间 */justify-content:space-around;/* 每个间距左右空间大小相等，间距相等 */justify-content:space-evenly;/* 3.项目在交叉轴上的对齐 */align-items:start;align-items:end;align-items:center;/* 交叉轴上的这三个属性不能用，无论交叉轴是横向的row还是纵向的column *//* align-items:space-between;align-items:space-around;align-items:space-evenly; */}.one,.two,.three {width:100px;height:100px;background-color: lightgreen;border:1px solid #000;/* flex-grow:1; */flex-shrink:1;flex-basis:1;}.three {order:2;place-self:center;}.two {order:1;}.one {order:3;place-self:end;place-self:start;place-self:center;}</style></head><body><div class="box"><div class="one">One</div><div class="two">Two</div><div class="three">Three<br>has<br>extra<br>text</div></div></body></html>