flex布局

display: flex; 将元素改为flex布局 记住一定是给父元素

首先我们来了解一下flex布局

1. 默认的主轴是 x 轴 行 row  那么y轴就是侧轴
2. 我们的元素是跟着主轴来排列的
3. 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

图片解释  main axis主轴    main start主轴开始  main end主轴结束  

                cross start侧轴开始  cross end侧轴结束   cross axis侧轴

项目是跟着主轴来排序的 谁是主轴就跟谁

项目默认为不换行 当元素超出是 会每个项目平分空间

给父元素的

默认x主轴 改变轴 flex-direction

row	x为主轴   也就是一行排序   （默认）
row-reverse	x为主轴   也就是一行排序     从结束开始
column	y为主轴   从上到下一行排序
column-reverse	y为主轴   从上到下一行排序  从结束开始

 

 

flex-wrap 设置弹性盒子中元素是否换行

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

justify-content 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式

• flex-start         默认值。从行首起始位置开始排列。
• flex-end          从行尾位置开始排列。
• center             居中排列。
• space-between       均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
• space-evenly          均匀排列每个元素，每个元素之间的间隔相等。
• space-around         均匀排列每个元素，每个元素周围分配相同的空间。

 align-items 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式

• stretch           默认。项目被拉伸以适合容器。
• center            项目位于容器的开头。
• flex-start        项目位于容器的末端。
• flex-end         项目位于容器的末端。
• baseline        项目被定位到容器的基线。

 

 align-content 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。 

 给项目的

order 项目的排列顺序  默认为0  数值越小越靠前

flex-grow 放大比例      默认为0   即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

align-self 属性允许单个项目有与其他项目不一样的对齐方式，

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。