Flex弹性盒模型

Flex弹性盒模型

—、flex布局的特点

 1.flex布局的特点
 又叫弹性布局，为盒状模型提供最大灵活性
 2.主要由主轴和副轴构成

---

.box{
display: flex;
}`

---

二、容器的属性

 容器的属性也成为父元素的属性
 共有6种

基本属性	作用
flex-direction	决定主轴的方向（项目的排列顺序）
flex-wrap	决定项目是否换行
flex-flow	前两个的简写方式
justify-content	定义了项目在主轴的对齐方式
align-items	定义了项目在侧轴的对齐方式（用于单行）
align-content	定义了项目在侧轴的对齐方式（用于多行）

各个容器属性的详细用法
😐 主轴

flex-direction

row: 默认，从左到右
row-reverse: 从右到左
column:默认， 从上到下
column-reverse:从下到上

😐

flex-wrap:

nowrap: 默认，不换行
wrap: 换行
wrap-reverse: 第一行在最下方，依次向上排列

😐

justify-content

flex-start: 左对齐
flex-end: 右对齐
center: 水平居中
space-between: 先两侧对齐，中间项目均分剩余空间
space-around: 每一个项目左右两侧的空间相等
备注 因此边框处的间隔比中间的小一倍

😐 副轴

align-items

flex-start：从上到下
flex-end: 从下到上
center: 垂直居中
beseline: 项目内第一行文字居中对齐
stretch: 如果项目未设置高度，则占满父元素的高度空间

😐

align-content

flex-start: 从上到下
flex-end: 从下到上
center: 垂直居中
space-between: 两端对齐，中间均分
space-around: 每个项目两侧均分，且不会重叠
stretch: 如果项目未设置高度，则占满父元素的高度空间

三、项目的属性

基本属性	作用
order	定义项目的排列顺序
flex-shrink	定义缩小的比例
flex-grow	定义放大的比例
flex-basis	定义分配空间前，项目占主轴的空间
flex	三者的简写，一般形式
align-self	对于单个元素的对齐方式

项目属性的详细作用
😐

order: 默认值为0，数值越小，排列顺序越靠前

flex-shrink: 默认值为1，即空间不足，项目会相应的缩小

flex-grow: 默认值为0，即使不够也不放大

flex: 前三者的简写
有两个简便的方法

auto(1 1 auto)
none(0 0 auto)

😐

alidn-self:对于单个项目的对齐方式，他的显示效果可以覆盖alidn-items 且默认为auto,表示继承父元素的align-items,如果无父元素，则等同于stretch

auto flex-start flex-end center baseline stretch