html_css_flex弹性盒模型_ZHOU125disorder_

弹性盒模型

弹性盒模型的使用方法

为父级元素添加`display: flex;` 或者 `display: inline-flex;

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

flex-direction 
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

flex-direction属性决定主轴的方向，默认为row，即水平方向，起点在左。
子项目按照主轴的方向从起点开始排列。

• row ，默认值，水平主轴，起点在左；
• row-reverse，水平主轴，起点在右；
• column，垂直主轴，起点在上；
• column-reverse，垂直主轴，起点在下。

flex-wrap

flex-wrap属性决定子元素主轴摆放不下的时候，项目换不换行，默认不换行。

• none ，默认值，不换行；（摆放不下按比例缩放）
• wrap，换行，第一排在最前；
• wrap-reverse，换行，最后一排在最前。

flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写。
默认值为flex-flow: row none;。

justify-content

justify-content属性定义子元素在主轴的对齐方式。

• flex-start，默认值，起点对齐；
• flex-end，终点对齐；
• center，居中
• space-between，两端对齐，中间间隔分均分配；
• space-around，所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔。

align-items

align-items定义子元素在副轴的对齐方式。

• flex-start，副轴起点对齐；
• flex-end，副轴终点对齐；
• center，副轴居中对齐；
• baseline，文本基线对齐
• stretch，默认值，子元素如果没有设置高度(宽度)，占满整个容器。（如果全部子元素都有设置高度值，则表现和flex-start一致。）

align-content

align-content属性定义多主轴之间（也就是换行后行与行之间）的对齐方式。所以，如果子元素没有换行，这个属性就不起作用。

• flex-start，副轴起点对齐；
• flex-end，副轴终点对齐；
• center，副轴居中对齐；
• space-between，副轴两端对齐，中间平均分配；
• space-around，每行之间间距平均分配；
• strecth，默认值，如果子元素没有设置高度，则占满对应主轴。（其余5个值中，没有设置高度的子元素和该行最高的高度一样）

子元素属性

• order

  order属性定义子元素（视觉上）的展示顺序，值为一个数字，越小越优先摆放。

• flex-grow

  flex-grow属性用于规定 主轴有剩余空间时 子元素增大的分配比例，默认为0，即不增大。

• flex-shrink

flex-shrink属性用于规定 主轴空间不足时 子元素缩小的分配比例，默认为1，即分均分配来缩小。

• flex-basis

  flex-basis属性定义在分配空间之前，子元素占据的主轴空间大小。默认值auto即元素本来的大小。

• flex

  flex属性是flex-grow flex-shrink flex-basis的简写，默认值就是这三者的默认值flex: 0 1 auto;。最少需要写一个值，后两个值省略。

  flex有两个特殊值，auto相当于1 1 auto，none相当于0 0 auto。

  推荐使用优先使用这个属性，而不是单独写三个分解属性，因为浏览器会自动推算相关值。

• align-self

  align-self属性允许子元素自己规定自己的对齐方式。该属性默认继承父级的align-items，可以通过修改各自的align-self实现各个子元素不同的对齐方式。